function initNumberElement(){ let idReference = ['zero','one','two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; let numberElementReference = []; let temp = '0'; for (const key of idReference) { numberElementReference.push(document.getElementById(key)); for (let i = 0; i < numberElementReference.length; i++) { numberElementReference[i].addEventListener('click', () => { temp = temp + String(i); changeVisualOut(temp) }) } } return numberElementReference;}
Una vez que los elementos se han recuperado del Dom, intento insertar dinámicamente un addEventListener () para cada elemento con forEach (), pero cada vez que hago clic en un elemento, el evento se activa varias veces. ¿Por qué?
Incluso usando un bucle for, la dinámica sigue siendo la misma
No necesitas un segundo bucle en absoluto. En el primer ciclo, está iterando a través de la lista de identificación y agrega elementos en la matriz numberElementReference . Luego, para todos los elementos en la matriz numberElementReference , está agregando un controlador de clic, es por eso que obtuvo múltiples oyentes por elemento (porque para cada elemento en el bucle externo está registrando detectores de eventos para toda la matriz numberElementReference nuevamente)
Solo puedes usar un bucle:
function initNumberElement() { let idReference = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]; let numberElementReference = []; let temp = "0"; for (let i = 0; i < idReference.length; i++) { const id = idReference[i]; const element = document.getElementById(id); numberElementReference.push(element); element.addEventListener("click", () => { temp = temp + String(i); changeVisualOut(temp); }); } return numberElementReference; }