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');
})
})
onClick
?