Vanilla JS购物车总价计算异常：数字拼接而非累加求助

我在添加商品到购物车后计算总价时遇到问题：变量未进行数字累加，而是将字符拼接成字符串。

Vanilla JS实现的加入购物车函数：

const addCartBtn = (section) => {
  let totalPrice = 0;
  cartBtn.forEach(btn => {
    btn.addEventListener("click", () => {
      const price = btn.parentElement.parentElement.children[3].children[0];

      let cart = document.querySelector('.cart .items');

      let item = document.createElement("div");
      item.classList.add("item");
      item.innerHTML = 
      `
          <div class="price-info">
              <div class="price">${price.textContent}</div>
          </div>
      `

    cart.appendChild(item);

    // Checkout calculation
    let totalPriceDiv = document.querySelector(".total-price");
    let priceCalc = parseFloat(price.textContent).toFixed(2);
    totalPrice += priceCalc;
    totalPriceDiv.innerHTML = totalPrice;

})
})}

问题现象：页面上总价显示为字符串拼接结果（如019.9939.99），而非数字累加的正确数值。

核心问题原因 #

toFixed(2)方法会将数字转换为保留两位小数的字符串，所以执行totalPrice += priceCalc时，本质是字符串拼接而非数字加法。

修复代码 #

const addCartBtn = (section) => {
  let totalPrice = 0;
  // 提前查询DOM元素，避免每次点击重复查询
  const cart = document.querySelector('.cart .items');
  const totalPriceDiv = document.querySelector(".total-price");

  cartBtn.forEach(btn => {
    btn.addEventListener("click", () => {
      // 建议给价格元素加专属class（如"product-price"），替代脆弱的children索引写法
      const priceElement = btn.closest('.product-item').querySelector('.product-price');
      // 解析为纯数字
      const priceValue = parseFloat(priceElement.textContent);

      // 创建购物车项
      let item = document.createElement("div");
      item.classList.add("item");
      item.innerHTML = `
          <div class="price-info">
              <div class="price">${priceElement.textContent}</div>
          </div>
      `;
      cart.appendChild(item);

      // 先完成数字累加，最后再格式化输出
      totalPrice += priceValue;
      totalPriceDiv.textContent = totalPrice.toFixed(2);
    })
  })
}

关键优化点 #

1. 数字与字符串分离处理：先完成totalPrice的数字累加，最后再用toFixed(2)格式化显示，避免字符串干扰数字运算。
2. 减少DOM查询次数：将cart和totalPriceDiv的查询移到事件监听外部，避免每次点击重复查询DOM，提升性能。
3. 优化元素获取方式：用closest()和querySelector()替代多层children索引，代码更健壮（DOM结构微调时不会直接失效）。

额外注意事项 #

• 如果价格文本包含非数字字符（如"¥"、"$"），需要先清理字符串再解析：parseFloat(priceElement.textContent.replace(/[^0-9.]/g, ''))
• 若需页面刷新后保留购物车总价，可将totalPrice存入localStorage，初始化时读取恢复。

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