Estoy buscando soluciones para mostrar la información correcta de la película en mi superposición. Tengo una "ventana emergente" que aparece cuando hago clic en una película y se supone que muestra la información de la película, pero cuando hago clic en una película, sin importar cuál sea, solo muestra la información de la última película, ¿qué debería hacer? hago para arreglarlo?
const movieIntegration =() => { allMovies.map(movie=> { movieGallery.innerHTML += `<div class="imgContainer"> <img src="${movie.img}" alt="${movie.name}"> <div class="titleContainer"> <div class="movieTitle"> ${movie.name} </div> <div class="seemore"> See more </div> </div> </div>` const seemore = document.querySelectorAll(".seemore") seemore.forEach(elm => { elm.addEventListener("click",() => { pageContainer.innerHTML += `<div class="popupContainer"> <div class="popup"> ${movie.name} <div id="likeButton"> <img src="img/like.png"> </div> <div id="editButton"> <img src="img/edit.png"> </div> <a href="submit.html"> <div id="addingButton"> <img src="img/add.png"> </div> </a> </div> </div>` console.log(true) }, true) }) }) }el problema es que está obteniendo todo el elemento .seemore para cada película y está editando el contenido de TODOS los elementos para cada película, por lo que la última película sobrescribirá el contenido de todas las anteriores.
Una solución podría ser algo como esto:
const movieIntegration = () => { allMovies.map((movie) => { movieGallery.innerHTML += `<div class="imgContainer"> <img src="${movie.img}" alt="${movie.name}"> <div class="titleContainer"> <div class="movieTitle"> ${movie.name} </div> <div class="seemore"> See more </div> </div> </div>` }) const seemore = document.querySelectorAll('.seemore') seemore.forEach((elm, i) => { elm.addEventListener( 'click', () => { pageContainer.innerHTML += `<div class="popupContainer"> <div class="popup"> ${allMovies[i].name} <div id="likeButton"> <img src="img/like.png"> </div> <div id="editButton"> <img src="img/edit.png"> </div> <a href="submit.html"> <div id="addingButton"> <img src="img/add.png"> </div> </a> </div> </div>` }, true ) }) } De esta manera, está mapeando los elementos .seemore DESPUÉS de terminar el mapa de todas las películas y, para .seemore allMovies obtiene la película asociada y escribe su nombre dentro.