Estoy tratando de asignar un controlador de eventos para una etiqueta HTML, quiero activar una función cuando cambia el valor, pero no se activa ningún evento.
<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>Aquí está mi JS:
const $sideCartProgressBar = document.querySelector("#side-cart__progress-bar") $sideCartProgressBar.addEventListener("change", function(){ console.log('Hello') })<progress> no admite un detector de eventos de change . Además, que yo sepa, no genera ningún evento cuando cambias su value .
Puede ver, por ejemplo, que MDN documenta la existencia del evento de change en <select> pero no hay documentación similar del evento de change en <progress> , lo que respalda mi afirmación de que no existe tal evento para <progress> . De hecho, no hay eventos documentados para <progress> en absoluto (además de los eventos DOM heredados).
Debería encontrar otra forma de hacer esto, como modificar el código que actualiza cart.total_price para hacer algo extra cuando se alcance el objetivo_final.