无法累加数组元素：购物车商品价格求和异常问题求助

嘿，这个问题我太熟了，一眼就看出症结所在！

你现在得到200020002000而不是预期的6000，核心原因是你在对字符串做拼接，而不是对数字做加法。productPrice.innerHTML获取到的是页面上的文本内容，它的类型是字符串，直接push到数组后，reduce方法执行的是字符串拼接逻辑，自然就把几个2000连在一起了。

具体修复方案 #

只需要在把价格存入数组前，把字符串转换成数字类型就行，常用的转换方法有三种，根据你的价格场景选：

• 如果是整数价格：用parseInt()，记得加第二个参数10指定十进制，避免意外的八进制解析
• 如果是带小数的价格：用parseFloat()
• 通用型转换：用Number()函数

修复后的完整代码 #

var productPrice = document.getElementById("productPrice"); 
var totalPrice = document.getElementById("totalPrice"); 
var addAlert = document.getElementById("addAlert"); 
var arr = []; 

function addToCart() { 
  // 先把字符串价格转成数字再存入数组
  var priceNum = Number(productPrice.innerHTML);
  arr.push(priceNum); 

  function getSum(total, num) { 
    return total + num; 
  } 

  // 给reduce加初始值0，避免数组为空时报错
  var tempTotal = arr.reduce(getSum, 0); 
  totalPrice.innerHTML = tempTotal; 
}

额外小提示 #

如果你的价格带有货币符号（比如¥2000或者$2000.50），得先把非数字部分去掉再转换，比如：

var priceText = productPrice.innerHTML.replace(/[^0-9.]/g, '');
var priceNum = parseFloat(priceText);

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