Para mí, For Loops y ForEach Loops son dos de las mejores formas de manejar y mostrar datos de gran tamaño. El problema es que quiero agregar un eventListener a un bucle e inmediatamente te encuentras con problemas. Aquí está mi código, recorre una matriz proporcionada por API y crea divisiones HTML perfectamente. Cerca de la parte inferior del código, puede verme intentando agregar un EventListener y registrar cualquier clic que ocurra. Cuando hago clic recibo esto en la consola:

 [object HTMLDivElement] Has Been Clicked

Lo que significa que no está extrayendo información del div en el que se hizo clic.

 for (i = 0; i < filtered.length-1; i++) { //Loop through games of Leagues for (x=0; x<filtered[i].length;x++){ //Create Parent Div For Data let parent = document.createElement("div") parent.className = 'parentDiv' //League Duplication not allowed if (arrLeagues.includes(filtered[i][x].league.id)) { } else { arrLeagues.push(filtered[i][x].league.id) //League Name let league = document.createElement("div") league.className = 'league' league.innerHTML = filtered[i][x].league.name + `<img class='flag' src=${filtered[i][x].league.flag}>` parent.appendChild(league) } //Home Container let child1 = document.createElement("div") child1.className = 'childDiv' //Game Status let gameStatus = document.createElement("div") gameStatus.className = 'status' gameStatus.innerHTML = filtered[i][x].fixture.status.short parent.appendChild(gameStatus) //Home Name let homeTeamName = document.createElement("div") homeTeamName.className = 'team1' homeTeamName.innerHTML = filtered[i][x].teams.home.name parent.appendChild(homeTeamName) //Home Score let homeTeamScore = document.createElement("div") homeTeamScore.className = 'score1' parent.appendChild(homeTeamScore) //Away Container let child2 = document.createElement("div") child2.className = 'childDiv' //Away Name let awayTeamName = document.createElement("div") awayTeamName.className = 'team2' awayTeamName.innerHTML = filtered[i][x].teams.away.name parent.appendChild(awayTeamName) //Away Score let awayTeamScore = document.createElement("div") awayTeamScore.className = 'score2' parent.appendChild(awayTeamScore) //My Attempt to add Event Listener parent.addEventListener("click", function(){ console.log(`${awayTeamName} Has Been Clicked`) }) //Push all Data to DOM document.querySelector('.parentContainer').appendChild(parent);

He intentado buscar otras páginas o información sobre esto y no parece haber mucho. Si pudiera vincularme a información sobre esto o explicar cómo agregar eventListeners a elementos creados en bucle, sería bueno. Por supuesto, ni siquiera sé si esto es posible o práctico, si es imposible o poco práctico, no tengas miedo de decírmelo.