电商购物车页面商品数量更新功能问题求助

你的核心问题是当前点击「Add to Cart」时只会默认给购物车加1件商品，没有同步商品卡片里数量输入框的数值。下面是具体修改方案：

第一步：修复HTML中的错误 #

• 移除重复的id="cart-button"（按钮id必须唯一，原代码里购物车按钮和Product1的加购按钮都用了这个id）
• 修正Product2的数量输入框id，从product1-quantity改为product2-quantity，和label的for属性对应

第二步：修改JavaScript逻辑 #

• 更新addToCart函数，新增quantity参数，不再默认递增1
• 绑定加购按钮事件时，获取对应商品的数量输入框数值，传入addToCart
• 增加数值合法性校验，确保数量是符合要求的正整数

修改后的完整代码 #

HTML部分

<div class="container">
  <button id="cart-button">Cart</button>
  <div class="products">
    <div class="product">
      <img src="./vision_red_front.png" alt="Product 1">
      <h3>Product 1</h3>
      <p>Price: $10</p>
      <div class="quantity">
        <span class="quantity">quantity : </span>
        <input type="number" id="product1-quantity" class="product-quantity" min="1" max="1000" value="1" />
      </div>
      <button class="add-to-cart" data-name="Product 1" data-price="10">Add to Cart</button>
    </div>

    <div class="product">
      <img src="./vision_red_front.png" alt="Product 2">
      <h3>Product 2</h3>
      <p>Price: $20</p>
      <label for="product2-quantity">Quantity:</label>
      <input type="number" id="product2-quantity" class="product-quantity" value="1" min="1" max="1000">
      <button class="add-to-cart" data-name="Product 2" data-price="20">Add to Cart</button>
    </div>
  </div>
  <div class="cart">
    <h3>Cart</h3>
    <ul id="cart-items"></ul>
    <p>Total: $<span id="cart-total">0</span></p>
    <a href="#"><button class="checkout" id="checkout"> Checkout</button></a>
  </div>
</div>

JavaScript部分

const cartButton = document.getElementById('cart-button');
const cart = document.querySelector('.cart');
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const addButtons = document.querySelectorAll('.add-to-cart');

let cartItemsArray = [];

function renderCartItems() {
  cartItems.innerHTML = '';
  cartItemsArray.forEach(item => {
    const li = document.createElement('li');
    li.innerHTML = `
      <img src="${item.image}" alt="${item.name}">
      <span>${item.name} x ${item.quantity}</span>
      <span>$${(item.price * item.quantity).toFixed(2)}</span>
    `;
    cartItems.appendChild(li);
  });
  cartTotal.textContent = calculateCartTotal();
}

function calculateCartTotal() {
  let total = 0;
  cartItemsArray.forEach(item => {
    total += item.price * item.quantity;
  });
  return total.toFixed(2);
}

function addToCart(name, price, image, quantity) {
  // 确保数量是合法的正整数
  const validQuantity = Math.max(1, Math.min(1000, parseInt(quantity) || 1));
  const existingItem = cartItemsArray.find(item => item.name === name);
  
  if (existingItem) {
    existingItem.quantity += validQuantity;
  } else {
    cartItemsArray.push({ name, price: parseFloat(price), image, quantity: validQuantity });
  }
  renderCartItems();
}

cartButton.addEventListener('click', () => {
  cart.classList.toggle('show');
});

addButtons.forEach(button => {
  const productCard = button.closest('.product');
  const name = button.getAttribute('data-name');
  const price = button.getAttribute('data-price');
  const image = productCard.querySelector('img').getAttribute('src');
  const quantityInput = productCard.querySelector('.product-quantity');

  button.addEventListener('click', () => {
    addToCart(name, price, image, quantityInput.value);
  });
});

修改说明 #

1. 用closest('.product')精准获取当前按钮所属的商品卡片，避免DOM层级变化导致的选择错误
2. 新增数量合法性校验，防止输入非数字或超出范围的数值
3. 给price属性做parseFloat转换，确保计算总价时是数字类型
4. 渲染商品小计的时候也用toFixed(2)保证金额格式统一

内容的提问来源于stack exchange，提问作者Petar Necovski