1

Necesito agregar un addEventListener a un boton que esta dentro de un then en un fetch, el problema esta que el boton no registra el click:

fetch(listaSeriesPopulares)
.then(results =>results.json())
.then(shows=>{
    shows.forEach(show => {
        seriesPopulares.innerHTML+= `<div class="cardContainer">
                                        <img  class ="portada" src='https://www.themoviedb.org/t/p/w440_and_h660_face${show.poster_path}'>
                                        <div class="containerRating">
                                            <div class="circle">
                                                <p class="ratingAverage">${show.vote_average}</p>
                                            </div>
                                        </div>
                                        <div class="tituloShow">${show.name}</div>
                                        <div class="contenedorBtn">
                                            <button class="btnWatchlist" id="btnWatchlist${show.id}">Agregar a Watchlist</button>
                                            <button class="btnColeccion" id="btnColeccion${show.id}">Agregar a Coleccion</button>
                                        </div>
                                    </div>
                                    `   
        
        const btnColeccion = document.getElementById(`btnColeccion${show.id}`)
        console.log(btnColeccion);
        btnColeccion.addEventListener("click",()=>{
            console.log("prueba")
        })
    });
    
    
})
.catch(error=>console.error(error))

no tengo claro como resolverlo, creo que el problema esta en que el fetch no lo acepta. Podria ser que primero tendria que traer la informasion del archivo json a un array y trabajar con el array? Gracias de antemano.

2 respuestas 2

1

Lo que podrias hacer y lo veo mas correcto a mi parecer, es agregar la propiedad onclick() a tu button y como parametro le pasas el id

<button onclick="addToWatchList(${show.id})" class="btnWatchlist" id="btnWatchlist${show.id}">Agregar a Watchlist</button>

Luego de eso ya declaras tu funcion fuera del fetch

function addToWatchList(idShow) {
  console.log("El id es", idShow)
}

Por lo tanto no necesitas esto dentro del fetch

const btnColeccion = document.getElementById(`btnColeccion${show.id}`)
console.log(btnColeccion);
btnColeccion.addEventListener("click",()=>{
  console.log("prueba")
})
1
  • 1
    Muchisimas gracias por tu respuesta! Me sirvio usar esa propiedad. En el fetch solo agregue pushear el objeto a un nuevo array y trabaje con el onclick y salio andando! Gracias!!
    – Elias
    Commented el 9 mar. 2023 a las 21:13
0

El problema no está en el fetch, el problema está seriesPopulares.innerHTML+= , en cada iteración pisas el html con otro html, que si bien en su estructura es lo mismo, en rigor es otro botón. En otras palabras, la iteración2 borra lo que pusiste in la iteración2, entonces el botón de la iteración1 ya no tiene evento.

La solución más simple es usar el atributo onclick, que para casi todos los caso es mejor que un addEventListener

    shows.forEach(show => {
        seriesPopulares.innerHTML+= `
        <div class="cardContainer">
           <div class="contenedorBtn">
             <button class="btnWatchlist" onclick="mifuncion()" id="btnWatchlist${show.id}">Agregar a Watchlist</button>
             <button class="btnColeccion" onclick="mifuncion2()" id="btnColeccion${show.id}">Agregar a Coleccion</button>
           </div>
       </div> `;

La otra es agregar los eventos al final, después del foreach

    shows.forEach(show => {
        seriesPopulares.innerHTML+= `
        <div class="cardContainer">
           <div class="contenedorBtn">
             <button class="btnWatchlist" onclick="mifuncion()" id="btnWatchlist${show.id}">Agregar a Watchlist</button>
             <button class="btnColeccion" onclick="mifuncion2()" id="btnColeccion${show.id}">Agregar a Coleccion</button>
           </div>
       </div> `;
  
    });
     document.queryElementAll(".btnWatchlist").forEach(a=>a.addEventListener("click", () => console.log("boton"));
    
    //o repetir el foreach
   //  shows.forEach(show => {
   //  const btnColeccion = document.getElementById(`btnColeccion${show.id}`);
   //     console.log(btnColeccion);
   //     btnColeccion.addEventListener("click",()=>{
   //         console.log("prueba")
   //     })
   // });
})

También es buena alternativa usar un Template

const shows = [{id:1},{id:2}]; //solo para el test

const template = document.getElementById("containerTemplante");
shows.forEach(show => {
    let cardCont = template.content.cloneNode(true);
    
    //cambiamos los id de los botones
    let btn1 = cardCont.getElementById("boton1");
    let btn2 = cardCont.getElementById("boton2");
    btn1.id = `btnWatchlist${show.id}`;
    btn2.id = `btnColeccion${show.id}`;
    
    
    //agregamos eventos
    btn1.addEventListener("click",()=>{
            console.log("prueba")
    });
    
    //agregamos al padre
    seriesPopulares.append(cardCont);
    
   
});
<div id="seriesPopulares"></div>

<template id="containerTemplante">
    <div class="cardContainer">
           <div class="contenedorBtn">
             <button id="boton1" class="btnWatchlist">Agregar a Watchlist</button>
             <button id="boton2" class="btnColeccion">Agregar a Coleccion</button>
           </div>
       </div>
</template>

1
  • Gracias por la aclaración! Si ayer probé el onclick y salió andando. Muchas gracias!
    – Elias
    Commented el 10 mar. 2023 a las 21:20

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.