添加到購物車按鈕沒有響應

Question

我的添加到購物車按鈕沒有響應。 我在我的添加到購物車按鈕上應用了 javascript，在購物車按鈕中，我分配了屬性，即數據產品，其值為 {{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>

即使我多次單擊“添加到購物車”按鈕，控制台也沒有顯示任何內容

Answer 1

而不是getElementsByClassName使用querySelectorAll因為@tacoshy聲明getElementsByClassName返回 HTML 集合的對象而不是數組。 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)
    })
})