Soy muy nuevo en el desarrollo front-end y recientemente comencé a configurar EventListeners para mis elementos HTML con JS en lugar de agregar una etiqueta html onclick, ya que me dijeron que onclick es una mala práctica (¿es eso cierto?)
En el siguiente código, la frase que registro en la consola ("Prueba, se hizo clic en la etiqueta de entrada") siempre se registra dos veces cada vez que se hace clic en una entrada. Por supuesto, el evento solo debería activarse una vez y no tengo idea de que se imprime en la consola dos veces, ¿qué estoy haciendo mal?
(function () { window.addEventListener("load", () => { const documentParentElement = document.querySelectorAll(".rating-button"); documentParentElement.forEach(element => { element.addEventListener("click", event => { const targetElement = event.target; console.log("Test, the input tag was clicked") const selectedRating = targetElement.value; }) }); }); }()); <div class="rating" data-decision-id="{{decision.id}}" data-user-id="{{decision.user_id}}"> <input type="radio" class="rating-button" id="star-1-{{decision.id}}" name="rating" {% if decision.rating.rating == 1 %} checked {% endif %} value="1"/> <input type="radio" class="rating-button" id="star-2-{{decision.id}}" name="rating" {% if decision.rating.rating == 2 %} checked {% endif %} value="2"/> <input type="radio" class="rating-button" id="star-3-{{decision.id}}" name="rating" {% if decision.rating.rating == 3 %} checked {% endif %} value="3"/> <input type="radio" class="rating-button" id="star-4-{{decision.id}}" name="rating" {% if decision.rating.rating == 4 %} checked {% endif %} value="4"/> <input type="radio" class="rating-button" id="star-5-{{decision.id}}" name="rating" {% if decision.rating.rating == 5 %} checked {% endif %} value="5"/> </div>