2

he estado realizando un proyecto cargando un JSON con una lista de datos. Ahora lo que quiero es ponerles un EventListener a un botón, pero al hacer pruebas no imprime console.log.

El código se lee y existe en la página, pero nunca se ejecuta, sin embargo, al colocarlo en consola directamente indica que la lógica está bien.

//Se añade el JSON

const elementoCarousel = document.querySelector('.menu__cafes');

export function loadjson() {
  fetch('/src/scripts/cafes.json')
  .then(Response => Response.json())
  .then(data => {
    let html = '';
    data.forEach(cafe => {
      html += 
      `
      <div class="menu__cafe">

        <div class="menu__foto">
          <img class="menu__img" src="${cafe.img}" alt="${cafe.nombre}">
        </div>

        <div class="menu__desc">
          <p class="menu__p">${cafe.nombre}</p>
          <p class="menu__p">${cafe.precio}</p>
        </div>

        <button class="menu__btn" type="button">+</button>

      </div>
      `;
    })
    elementoCarousel.innerHTML = html;
  })
.catch(() => {
  alert('No funciona');
})
}


//ESTA PARTE HACIA ABAJO NO FUNCIONA (pero si se lee)

const btns = document.querySelectorAll('.menu__btn');

btns.forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('Funciona');
  })
})

1
  • el EventListener, no sería onClick? el 14 may. 2021 a las 13:12

2 respuestas 2

3

Si lo haces poniendo datos un array directamente funciona, como en este fiddle.

Creo que lo que pasa es que como fetch es una función asíncrona, entonces cuando añades tus eventos, aun no has terminado de cargar los datos. Prueba cambiar los eventos dentro de un bloque then luego de cargar los datos.

export function loadjson() {
  fetch('/src/scripts/cafes.json')
  .then(Response => Response.json())
  .then(data => {
    let html = '';
    data.forEach(cafe => {
      html += 
      `
      <div class="menu__cafe">

        <div class="menu__foto">
          <img class="menu__img" src="${cafe.img}" alt="${cafe.nombre}">
        </div>

        <div class="menu__desc">
          <p class="menu__p">${cafe.nombre}</p>
          <p class="menu__p">${cafe.precio}</p>
        </div>

        <button class="menu__btn" type="button">+</button>

      </div>
      `;
    })
    elementoCarousel.innerHTML = html;
  }).then(() => {
    const btns = document.querySelectorAll('.menu__btn');

    btns.forEach(btn => {
      btn.addEventListener('click', () => {
        console.log('Funciona');
      })
    })

})
.catch(() => {
  alert('No funciona');
})
}
1

Estás asignando el evento para elementos que todavía no existen en el DOM, una opción es la respuesta de @CamiloGomez, moviendo esa parte del código para que se ejecute después de agregar los botones.

La otra es "delegar" el evento, es decir, escuchar los clics en el contenedor y analizar el elemento que disparó el evento:

// e es el evento, donde puedes obtener qué elemento lo disparó
elementoCarousel.addEventListener('click', (e) => {
    // Saber si el clic fue en un botón, analizando la clase
    if(e.target.classList.contains('.menu__btn')) {
        // Es un botón, puedes obtener el padre con closest()
        let parent = e.target.closest('.menu__cafe');
        // Desde el padre puedes obtener nombre y precio
        let data = parent.querySelectorAll('.menu__desc .menu__p');
        // Como tienes 2 párrafos, el elemento 0 es el nombre y 1 es el precio
        console.log('Nombre: ' + data[0].textContent);
        console.log('Precio: ' + data[1].textContent);
    }
});

Referencias:

Tu Respuesta

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

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