购物车总价计算异常求助：添加不同商品时总价错误叠加

问题根源 #

你的代码存在两个核心问题：

• 每次点击添加商品时，遍历localStorage里的所有在售商品数据累加总价，但localStorage存的是全量商品原始信息，不是用户实际加入购物车的商品，导致每次点击都把所有商品价格加一遍，叠加次数等于点击次数。
• 每次点击都会重复创建DOM元素添加到购物车，导致购物车出现重复商品条目，进一步加剧总价计算混乱。

修复步骤 #

我们需要单独维护购物车的商品列表（包含数量），统一处理购物车渲染和总价计算：

1. 新增购物车状态变量
   在全局作用域添加变量，存储用户实际加入购物车的商品数据：

// 购物车数据结构：[{id: 商品ID, quantity: 数量, title: 名称, price: 单价, image: 图片地址}, ...]
let cartItems = [];

2. 修改returnKey函数，更新购物车状态
   点击商品时，先检查购物车是否已有该商品，有则增加数量，没有则添加新条目，再调用统一的渲染函数：

function returnKey(clickedId) {
  cart.classList.add("active");
  // 从localStorage获取当前点击的商品信息
  const product = JSON.parse(localStorage.getItem(clickedId));
  if (!product) return;

  // 检查购物车是否已有该商品
  const existingItem = cartItems.find(item => item.id === clickedId);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cartItems.push({
      id: clickedId,
      quantity: 1,
      title: product[0],
      price: product[3],
      image: product[2]
    });
  }

  // 渲染购物车并更新总价
  renderCart();
}

3. 新增渲染购物车和计算总价的函数
   统一处理购物车DOM渲染和总价计算，避免重复创建元素：

function renderCart() {
  inputCart.innerHTML = ""; // 清空现有内容，防止重复添加
  let total = 0;

  cartItems.forEach(item => {
    // 计算单商品总价并累加到总金额
    const itemTotal = item.price * item.quantity;
    total += itemTotal;

    // 创建购物车条目DOM结构
    const cartItem = document.createElement("div");
    cartItem.style.display = "flex";
    cartItem.style.marginBottom = "12px";

    const cartImage = document.createElement("img");
    cartImage.src = item.image;
    cartImage.width = 75;
    cartImage.height = 75;

    const infoWrap = document.createElement("div");
    infoWrap.style.marginLeft = "10px";
    infoWrap.style.display = "flex";
    infoWrap.style.flexDirection = "column";

    const cartTitle = document.createElement("p");
    cartTitle.className = "cart-title";
    cartTitle.textContent = `${item.title} (x${item.quantity})`;

    const cartPrice = document.createElement("p");
    cartPrice.className = "cart-price";
    cartPrice.textContent = `$${itemTotal.toFixed(2)}`;

    infoWrap.appendChild(cartTitle);
    infoWrap.appendChild(cartPrice);
    cartItem.appendChild(cartImage);
    cartItem.appendChild(infoWrap);
    inputCart.appendChild(cartItem);
  });

  // 更新总价显示，保留两位小数更规范
  document.getElementById('priceTotal').innerHTML = `Total: $${total.toFixed(2)}`;
}

4. 调整clearCart函数，清空购物车状态
   修改清空函数，同时重置购物车状态变量：

function clearCart() {
  const removeCart = window.confirm("Are you sure you want to clear your cart?");
  if (removeCart) {
    cartItems = []; // 清空购物车状态
    inputCart.innerHTML = "";
    document.getElementById('priceTotal').innerHTML = "Total: $0.00";
    console.clear();
  }
};

5. 可选：购物车状态持久化
   如果需要刷新页面后保留购物车内容，可在renderCart末尾添加存储逻辑，页面加载时读取：

// 在renderCart函数最后添加，保存购物车到localStorage
localStorage.setItem("cartItems", JSON.stringify(cartItems));

// 页面加载时读取保存的购物车数据
window.addEventListener("load", () => {
  const savedCart = localStorage.getItem("cartItems");
  if (savedCart) {
    cartItems = JSON.parse(savedCart);
    renderCart();
  }
});

修改后效果 #

• 添加同款商品时，数量自动递增，总价正确计算为「单价×数量」
• 添加不同商品时，总价是所有商品的「单价×数量」之和，不会出现重复叠加
• 购物车条目清晰显示商品数量和单条总价，不会重复创建DOM元素

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