Estoy creando una página con algo de música, ahora mismo estoy trabajando en la página 'explorar'. Y verás alrededor de 10 tarjetas con música al azar de una matriz. Todo va sobre ruedas hasta que lo sepas. Agregué un botón para iniciar la música, pero parece que no puedo poner un AddEventListener en el botón, acabo de hacer las tarjetas con innerHTML (sé que no es la mejor opción, pero este proyecto aún es una práctica) Y ahora No soy capaz de hacer que funcione. Si pongo el detector de eventos después de la función con los botones innerHTML. Solo puedo conseguir 1.

 function handleLoadHighlights(number) { for (i = 0; i < 10; i++) { let randomSongs = Math.floor(Math.random() * songsList.length); let song = songsList[randomSongs]; let background = backgroundGradients[i]; audioFile.src = song.audio; highlightsOutput.innerHTML += ` <div class="highlighted__song" style="${background.backgroundcolor} ${background.backgroundimg}"> <div class="highlighted__description"> <h3 class="highlighted__description--title">${song.title}</h3> <p class="highlighted__description--para">${song.artist}</p> </div> <div class="highlighted__footer"> <button class="highlighted__button--play"><i class="fas fa-play-circle"></i></button> <img class="highlighted__img" src="./assets/covers/${song.img}"></img> </div> </div> `; } }

La funcion que me muestra la carta aleatoria con la cancion

 const playButton = document.querySelectorAll('.highlighted__button--play'); for(i = 0; i < 10; i++) { playButton[i].addEventListener('click', handlePlayAudio); }

Mi intento de arreglarlo, siempre devuelve el último dec