js购物车加减按钮代码

在JavaScript中实现购物车商品的加减功能，通常涉及到对商品数量的增减以及总价的实时更新。以下是一个简单的示例代码，展示了如何实现这一功能：

HTML结构

<div class="product">
    <span>商品名称</span>
    <button class="decrement">-</button>
    <input type="number" value="1" min="1" class="quantity">
    <button class="increment">+</button>
    <span class="price">¥100</span>
</div>
<div class="total-price">总价: ¥<span id="total">100</span></div>

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
    const quantityInputs = document.querySelectorAll('.quantity');
    const totalPriceDisplay = document.getElementById('total');

    function updateTotalPrice() {
        let total = 0;
        quantityInputs.forEach(input => {
            const price = parseFloat(input.nextElementSibling.textContent.replace('¥', ''));
            total += price * input.value;
        });
        totalPriceDisplay.textContent = total.toFixed(2);
    }

    quantityInputs.forEach(input => {
        const incrementButton = input.previousElementSibling;
        const decrementButton = input.nextElementSibling.previousElementSibling;

        incrementButton.addEventListener('click', function() {
            input.value = parseInt(input.value) + 1;
            updateTotalPrice();
        });

        decrementButton.addEventListener('click', function() {
            if (parseInt(input.value) > 1) {
                input.value = parseInt(input.value) - 1;
                updateTotalPrice();
            }
        });
    });
});

解释

HTML结构：每个商品包含一个减号按钮、一个数量输入框和一个加号按钮，以及商品的单价。
JavaScript逻辑：
- 页面加载完成后，为所有的数量输入框添加事件监听器。
- updateTotalPrice函数用于计算并更新总价。
- 点击加号按钮时，数量增加1，并更新总价。
- 点击减号按钮时，如果数量大于1，则数量减少1，并更新总价。