js购物车加减按钮代码

<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>

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();
            }
        });
    });
});