1

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);
      
   });
3
  • 3
    Lo que añadas con innerHTML no es parte del DOM. Deberías agregar los elementos mediante appendChild o algún otro método que efectivamente actualice el DOM. Saludos Commented el 29 jul. 2020 a las 16:11
  • 1
    Otro problema es que estas duplicando el id btn-seeMore en el loop. Los id deberian ser unicos.
    – Juan Marco
    Commented el 29 jul. 2020 a las 17:36
  • @MauricioContreras, lo que cargas con 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.
    – Triby
    Commented el 29 jul. 2020 a las 17:54

2 respuestas 2

0

He testeado la propiedad innerHTML y si puedes registrar un evento. Imagino que en tu caso no funciona, quizas algun error de script al llamar a los tag ${} embedidos o quizas intentando ejecutar el JS antes que cargue por completo el DOM. O que intentes registrar el evento antes de llamar a innerHTML.

En el siguiente ejemplo he copiado el codigo html sin los tag ${}. He creado un div donde mostraria el contenido usando innerHTML.

 document.getElementById("midiv").innerHTML += `<div class="col-12 col-lg-4 mt-5 pt-5">
                <div class="card m-0">
                    <img src="" class="card-img-top" alt="">
                      <div class="card-body">
                        <h5 class="card-title"> <strong></strong></h5>
                        <span class="d-block mb-2 card-text badge badge-primary text-wrap"><strong ">Category</strong>: </span>
                        <span class="d-block card-text badge badge-primary text-wrap"><strong ">Year</strong>:</span>
                        <button id="btn-seeMore" target="" class="text-center mt-3 ">See more</button>
                    </div>
                </div>
            </div>`
            
var btn = document.getElementById("btn-seeMore");
btn.addEventListener("click",function(){
    console.log("clicked");
});
<div id="midiv">
</div>

0

Como estás agregando el contenido, no es posible acceder a elementos que aún no existen y, de paso, estás repitiendo ID de botón; es mejor agregar btn-seeMore a la lista de clases.

Para este ejemplo, el botón Agregar y la función agrega() simularán la carga de contenido por AJAX y lo único que va a cambiar en cada llamada es el número, solo para poder identificar dónde se hizo clic.

Como aún no hay botones, no puedes asignarles evento, pero sí puedes asignarlo al documento, obteniendo el objeto que recibió clic con event.target y, si contiene la clase btn-seeMore, llamar a la función donde controlas las acciones del botón.

Para obtener el valor de un atributo no estándar (o personalizado) es necesario usar elemento.getAttribute('nombre-de-atributo'):

let contador = 1;
function agrega() {
    listado.innerHTML += 
            `<div class="col-12 col-lg-4 mt-5 pt-5">
                <div class="card m-0">
                    <img src="Poster ${contador}" class="card-img-top" alt="">
                      <div class="card-body">
                        <h5 class="card-title"><strong>Título ${contador}</strong></h5>
                        <span class="d-block mb-2 card-text badge badge-primary text-wrap"><strong ">Category</strong>: Topo ${contador}</span>
                        <span class="d-block card-text badge badge-primary text-wrap"><strong ">Year</strong>: Año ${contador}</span>
                        <button target="Target ${contador}" class="text-center mt-3 btn-seeMore">See more</button>
                    </div>
                </div>
            </div>`;
    // Actualizar contador para identificar los elementos agregados
    contador ++;
}
// Recibe como parámetro el botón donde se hizo clic
function seeMore(button) {
    // Obtener atributo personalizado
    console.log(button.getAttribute('target'));
}
// Ejecutar hasta que el DOM se haya cargado
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#btn-add').addEventListener('click', agrega);
    // Evento onclick para el documento
    document.addEventListener('click', function(e) {
        // El clic fue en un botón con clase btn-seeMore?
        if(e.target.classList.contains('btn-seeMore')) {
            // Ejecutar función, enviando el botón que recibió el clic
            seeMore(e.target);
        }
    });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="listado"></div>
<button id="btn-add">Agregar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.