Estoy tratando de conectar una matriz de objetos que se refieren a iconos SVG en un bucle for con una matriz de contenido coincidente al permitir que el índice del bucle for actúe como un mecanismo de emparejamiento. Tanto el registro de Array como la identificación de todos los objetos relevantes, pero cuando llamo a los cambios del panel [i], obtengo que el panel [i] no está definido. acc[i] parece funcionar bien dentro del ciclo for. ¿Cómo puedo asegurarme de que los detectores de eventos acc[i] se emparejen con sus paneles de posición de índice correspondientes para luego controlar css en los paneles para cambiar la visualización de oculto a bloqueado?
¡Gracias!
const acc = document.querySelectorAll(".fas.fa-plus-circle.fa-3x"); const panel = document.querySelectorAll(".panel"); let i; console.log(acc); console.log(panel); for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); console.log(panel[i]); if (panel[i].style.display === "block") { panel[i].style.display = "none"; } else { panel[i].style.display = "block"; } }); }Debido a que ha declarado i fuera del ciclo for , solo hay una variable i , y será igual a acc.length cuando se complete el ciclo. Entonces, cuando hace clic y se ejecuta el controlador de eventos, ese valor de i no es lo que desea tener allí.
Para resolver esto, convierta a i en una variable de ámbito de bloque:
for (let i = 0; i < acc.length; i++) { Ahora cada iteración del bucle tendrá su propia variable i , que conservará su valor. Habrá una i que sea 0, otra que sea 1,...etc. Como consecuencia, cada uno de los controladores de eventos accederá al derecho i que tiene el valor esperado.