Tengo el siguiente problema
Uncaught TypeError: Cannot read property 'addEventListener' of null
Estoy consumiendo una API de películas, en donde al principio solo carga el buscador, una vez que se busca algo, con un foreach los agrego a resultados, cada uno tiene un ID específico.
Lo que deseo es con el evento clic capturar lo que aloje con el atributo target de cada resultado y así buscar información extra, como actores etc.
Pero al dar clic no hace nada y me tira que el evento es nulo. Puse todos los script al último y hasta usé window.onload
En la interfaz:
peliculasAPI.forEach(pelicula => {
this.listado.innerHTML +=
`<div class="col-12 col-lg-4 mt-5 pt-5">
<div class="card m-0">
<img src="${pelicula.Poster}" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title"> <strong>${pelicula.Title}</strong></h5>
<span class="d-block mb-2 card-text badge badge-primary text-wrap"><strong ">Category</strong>: ${pelicula.Type}</span>
<span class="d-block card-text badge badge-primary text-wrap"><strong ">Year</strong>: ${pelicula.Year}</span>
<button id="btn-seeMore" target="${pelicula.imdbID}" class="text-center mt-3 ">See more</button>
</div>
</div>
</div>`
});
Cuando asigno el evento:
const valorBtn = document.getElementById("btn-seeMore");
valorBtn.addEventListener('click', (e) => {
console.log(e.target);
});
innerHTML
no es parte delDOM
. Deberías agregar los elementos medianteappendChild
o algún otro método que efectivamente actualice elDOM
. Saludosbtn-seeMore
en el loop. Losid
deberian ser unicos.innerHTML
sí forma parte del DOM, aunque puede que al navegador le tome un poco de tiempo interpretarlo; el problema real es que el contenido se va agregando y no existe todavía cuando él intenta acceder.