let addToCart = document.querySelectorAll('#app')
addToCart.forEach((btn) => {
btn.addEventListener('click',(e) => {
if (e.target.classList.contains('add-to-cart')) {
console.log('click!')
}
})
})
I am working with dynamic buttons and template literals to make a shopping cart. I fetch to extract the information from mongo DB, but when I click the add request button it only works a few times.
Thanks in advance
You're using querySelectorAll('#app')
The # means you want to get an ID, But querySelectorAll select mutiple Ids and document HTML accept only one id per page use instead querySelector('#app').
let app = document.querySelector('#app')
app.addEventListener('click',(e) => {
if (e.target.classList.contains('add-to-cart')) {
console.log('click!')
}
})
// Alernative way using querySelectorAll
/*
const btns = document.querySelectorAll('.add-to-cart');
[...btns].forEach(btn=>btn.addEventListener('click',()=>console.log('click!')))
*/<div id="app">
<li>
Item 1
<button class="add-to-cart">+</button>
</li>
<li>
Item 2
<button class="add-to-cart">+</button>
</li>
</div>