Como en el título. Estoy tratando de agregar un detector de eventos a todos los divs disponibles que genera su ID al hacer clic, pero solo funciona con el método forEach. For loop termina solo generando la ID de mi último div, incluso si hago clic en los otros.
Esta es la parte del código que funciona correctamente:
const elements = document.querySelectorAll('div') elements.forEach(element => { element.addEventListener('click', ()=>{ console.log(element.id) }) })Y esto no es así, siempre genera id10 en la consola (mi último div agregado):
const elements = document.querySelectorAll('div') for(element of elements){ element.addEventListener('click', ()=>{ console.log(element.id) })}¿No deberían estos dos funcionar exactamente igual? ¿Cual es la diferencia? ¿Hay alguna manera de hacer que funcione el bucle for?
La diferencia es cómo ha implementado su código. En el método forEach, ha declarado que los elementos son globales. Use dejar entrar para cada uno. Código de ejemplo:
for(let element of elements){ element.addEventListener('click', ()=>{ console.log(element.id) })}Esto devolverá la identificación del elemento de cada elemento en el que se hizo clic.
Si usa su implementación sin let , apuntará al último elemento div