Add event handler to HTML Progress tag

January 13, 2022

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')
})

>Solution :

<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.