JavaScript Implementing "change" Event for WooCommerce Cart

Question

Dear everyone,

I am trying to add eventListeners to my WordPress/WooCommerce Cart so that it changes the pricing on input change. Simple in theory.

The webpage (please put item in cart and go to cart): www.dickenbergh.com

My current test code:

<script type="text/javascript">

document.getElementsByTagName('input')[0].addEventListener('change', updatePricing);

function updatePricing(){
    document.getElementsByTagName('bdi')[2].innerHTML = '999 changed';
}

</script>

Problem:

The change only happens when typing into the input field. Not when changing it with the - and + buttons around it.

Question:

Why does it only change upon actually changing the input of the field by typing? Should the "change" event not also register the button changes on the - and + arrow?

Answer 1

I've checked the reference you provided. And at https://dickenbergh.com/cart/ the total price changes when we click on update, no matter change the value by +.- button or by typing manually.

So, the problem you described is working fine, I think. But I'll advice you to use ajax to automatically update the total price so you don't need that update button to change total price.

Or you can simply add update function to that change listener so that total price gets updated automatically without the need of that button.

Thanks.