innerHTML转数值计算异常：求和出现字符串拼接而非数值相加求助

问题根源分析 #

• 数组初始化时机错误：heightArr.push(heightValue.innerHTML) 在页面加载时只执行一次，只会存入初始值2700，后续拖动滑块修改数值时，数组不会同步更新，始终只有[2700]这一个元素。
• 数组拼接而非数值计算：tonum + tonum 中，tonum是转换后的数组[2700]，数组相加会被强制转成字符串拼接，结果就是"2700"+"2700"="27002700"，完全不是你要的数值求和。
• 冗余数组操作：这里根本不需要用数组存储数值，直接获取当前显示的数值计算即可，数组属于画蛇添足。

修正后的代码 #

JavaScript代码

const heightValue = document.querySelector(".height-value")
const tottalDiv = document.querySelector(".tottal-div")

function rangeSlide2(value){
  heightValue.innerHTML = value;
}

function tottal() {
  // 获取当前显示的数值并转为数字类型
  const currentNum = Number(heightValue.innerHTML);
  // 执行2倍计算（对应你预期的5400）
  tottalDiv.innerHTML = currentNum * 2;
}

HTML代码（无需修改）

<input type="range" name="range" id="height-range" min="2000" max="3500" step="100" value="2700" onchange="rangeSlide2(this.value)" onmousemove="rangeSlide2(this.value)">
<span class="height-value">2700</span>

<div class="button-div">
  <button type="button" class="submit" onclick="tottal()">tottal</button>
</div>

<div class="tottal-div">0</div>

扩展：如果需要用数组存储数值求和 #

要是你实际需求是记录多个数值再累加（比如多次调整滑块后求和），可以这样修改：

const heightValue = document.querySelector(".height-value")
const tottalDiv = document.querySelector(".tottal-div")

let heightArr = [];

function rangeSlide2(value){
  heightValue.innerHTML = value;
  // 每次调整滑块时，将新数值加入数组
  heightArr.push(value);
}

function tottal() {
  // 把数组所有元素转成数字后累加求和
  const totalSum = heightArr.map(Number).reduce((total, num) => total + num, 0);
  tottalDiv.innerHTML = totalSum;
}

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