js实现购物车计算

<div id="cart">
  <div class="cart-item">
    <span>商品1</span>
    <input type="number" value="1" class="quantity">
    <span class="price">100</span>
    <span class="subtotal">100</span>
  </div>
  <div class="cart-item">
    <span>商品2</span>
    <input type="number" value="1" class="quantity">
    <span class="price">200</span>
    <span class="subtotal">200</span>
  </div>
  <!-- 更多商品项 -->
  <div class="total">总价: <span id="totalPrice">300</span></div>
</div>

// 获取所有购物车项
const cartItems = document.querySelectorAll('.cart-item');

// 计算总价
function calculateTotal() {
  let total = 0;
  cartItems.forEach(item => {
    const quantity = parseInt(item.querySelector('.quantity').value);
    const price = parseFloat(item.querySelector('.price').textContent);
    const subtotal = quantity * price;
    item.querySelector('.subtotal').textContent = subtotal.toFixed(2);
    total += subtotal;
  });
  document.getElementById('totalPrice').textContent = total.toFixed(2);
}

// 监听数量输入框的变化
cartItems.forEach(item => {
  item.querySelector('.quantity').addEventListener('input', calculateTotal);
});

// 初始化总价
calculateTotal();