Кнопка добавления в корзину не отвечает

Моя кнопка добавления в корзину не отвечает. Я применил javascript на моей кнопке добавления в корзину, В кнопке корзины я присвоил атрибуту, т.е. data-product значение, которое является {{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>

Консоль ничего не показывает, хотя я нажимаю на кнопку Добавить в корзину несколько раз

Вместо getElementsByClassName используйте querySelectorAll, потому что, как указано @tacoshy, getElementsByClassName возвращает объект HTML Collection, а не массив. Также length вернет количество элементов в массиве, но не объект.

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)
    })
})
Вернуться на верх