将innerhtml转换为数字并进行计算

Question

我正在制作一个简单的材料计算器，但是当我对值求和时，我得到 27002700 而不是 5400 所以我尝试将其推送到数组并使用 .map 和 Number， 我重写了大约10次。我没有主意了。

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

let heightArr = []
function rangeSlide2(value){
  heightValue.innerHTML = value;
}
heightArr.push(heightValue.innerHTML)
function tottal() {
 let tonum = heightArr.map(Number)
  tottalDiv.innerHTML = tonum + tonum;
}

<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>

Answer 1

map 的结果将是一个数组，当您尝试将两个数组与一个值相加时，它将转换为 string，因此 [2700 ] + [2700] 与 '2700' + '2700' = '27002700' 相同。

所以，我认为您需要的是 reduce 方法来对所有值求和。

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

let heightArr = []
function rangeSlide2(value){
  heightValue.innerHTML = value;
}
heightArr.push(+heightValue.innerHTML)
function tottal() {
  let tonum = heightArr.reduce((acc, item) => acc + item)
  tottalDiv.innerHTML = tonum + tonum;
}

<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>