mi boton de agregar al carrito no responde Apliqué javascript en mi botón Agregar al carrito. En el botón del carrito, asigné un atributo, es decir, producto de datos, el valor que es {{product.id}}.
var updateBtns = document.getElementsByClassName('update-cart') for (var i = 0; i < updateBtns.length; i++) { updateBtns[i].addEventListener('click', function() { var productId = this.dataset.product var action = this.dataset.action console.log('productId:', productId, 'action:', action) }) } <div class="card-body"> <h5 class="card-title fw-bold text-uppercase">{{product.name}}</h5> <p class="card-text"> <h4 style="font-size: 1rem; padding: 0.3rem; opacity: 0.8;">$ {{product.price}} </h4> </p> <button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">ADD TO CART</button> </div> </div>La consola no muestra nada a pesar de que hago clic en el botón Agregar al carrito varias veces
En lugar de getElementsByClassName , use querySelectorAll porque @tacoshy indicó que getElementsByClassName devuelve un objeto de la colección HTML, no una matriz. Además, la length devolvería la cantidad de elementos dentro de una matriz pero no un objeto.
const updateBtns = document.querySelectorAll('.update-cart') updateBtns.forEach((updateBtn) => { updateBtn.addEventListener('click', (event) => { var productId = updateBtn.dataset.product var action = updateBtn.dataset.action console.log('productId:', productId, 'action:', action) }) })