I´m trying to assign an event handler for a HTML tag, I want to fire a function when the value changes, but none events are fired..
<progress
id="side-cart__progress-bar"
class="side-cart__progress-bar"
first-gift="{{ section.settings.product_1_progress_bar.id }}"
first-goal="{{ first_goal }}"
second-gift="{{ section.settings.product_2_progress_bar.id }}"
second-goal="{{ second_goal }}"
final-gift="{{ section.settings.product_3_progress_bar.id}}"
max="{{ final_goal }}"
value="{{ cart.total_price }}"
>
</progress>
Here's my JS:
const $sideCartProgressBar = document.querySelector("#side-cart__progress-bar")
$sideCartProgressBar.addEventListener("change", function(){
console.log('Hello')
})
<progress> does not support a change event listener. In addition, as far as I know, it raises no event when you change its value.
You can see, for example, MDN documents the existence of the change event on <select> but there is no similar documentation of change event on <progress>, supporting my claim that there is no such event for <progress>. In fact, there are no documented events for <progress> at all (besides inherited DOM events).
You should find some other way to do this, such as modifying the code which updates cart.total_price to do something extra when final_goal is reached.