I'm trying to run a simple loop on the WooCommerce cart page. When the page initially loads, the function does it's thing, but on update of the cart, it becomes lifeless.
Here's my loop function:
let radios = document.querySelectorAll( 'input[name="radio_options_set"]' );
simplySetAttrs();
function simplySetAttrs() {
// I started the var at 1 to skip the first radio input
for (var xx = 1; xx < radios.length; xx++) {
radios[xx].setAttribute( 'onclick', 'dothisFunction( this );' );
}
}
The only WooCommerce event that has shown any response is 'updated_cart_totals' and the radio buttons I'm targeting on the Cart page are inserted by another plugin.
Here's how I implemented it:
jQuery( document.body ).on( 'updated_cart_totals', simplySetAttrs() );
I can't get to figure out why the very basic loop doesn't take action. If I do an alert(), it works as expected, even after setting a timeout on it.
I've also tried adding different event listeners as an alternative to setting the attributes, but to no avail.
You can use jQuery attr to setAttribute. Try the below code.
let radios = document.querySelectorAll( 'input[name="convert_to_sub"]' );
simplySetAttrs();
function simplySetAttrs() {
// I started the var at 1 to skip the first radio input
for (var xx = 1; xx < radios.length; xx++) {
jQuery(radios[xx]).attr( 'onclick', 'dothisFunction( this );' );
}
}