网站购物车总价计算返回NaN问题排查请求

总价返回NaN的核心原因 #

• 总价变量未初始化：let totalPrice;声明后没赋值，初始值是undefined，第一次执行totalPrice = totalPrice + currentPrice时，undefined和数字相加直接得到NaN，后续计算全错。
• 价格字符串含干扰字符：从DOM取的价格可能带空格、币种符号（比如代码里的"руб."），直接用parseFloat转换容易失败，返回NaN。
• 元素获取失败无容错：如果amount或price元素没找到，parseInt/parseFloat处理null会直接返回NaN。

修复代码与步骤 #

1. 修复总价计算函数 #

function calcPrice() {
  const cartItems = document.querySelectorAll('.item__block')

  // 初始化总价为0，避免undefined参与计算
  let totalPrice = 0;
  cartItems.forEach(function(item) {
    const amount = item.querySelector('[data-counter]');
    const price = item.querySelector('.amount__price');

    // 元素没找到直接跳过，避免报错
    if (!amount || !price) return;

    // 提取纯数字：清除所有非数字、非小数点的字符
    const amountNum = parseInt(amount.textContent.trim(), 10);
    const priceNum = parseFloat(price.textContent.trim().replace(/[^\d.]/g, ''));

    // 转换失败也跳过，不影响整体计算
    if (isNaN(amountNum) || isNaN(priceNum)) return;

    totalPrice += amountNum * priceNum;
  })
  console.log(totalPrice)
}

2. 提前处理商品价格数据 #

在收集商品信息时，就把价格转成纯数字，避免DOM存储带干扰的字符串：

const productInfo = {
  id: card.dataset.id,
  imgSrc: card.querySelector('.gui__pizzablock').getAttribute('src'),
  title: card.querySelector('.productTitle').innerText,
  // 提前提取纯数字价格
  price: card.querySelector('.priceTitle').innerText.trim().replace(/[^\d.]/g, ''),
  description: card.querySelector('.gui__description').innerText,
  counter: parseInt(card.querySelector('[data-counter]').innerText, 10),
};

3. 优化购物车项的价格渲染 #

确保购物车DOM里的价格是纯数字（币种符号放在外面）：

<p style="margin: 70px 15px"><span class="amount__price">${productInfo.price}</span>руб.</p>

额外提示 #

• 用textContent替代innerHTML拿文本，避免HTML标签干扰。
• 所有数字转换后加isNaN判断，单个商品出问题不影响全局总价。
• 建议把购物车数据存在JS数组里，不要完全依赖DOM读取，计算和维护都更可靠。

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