Konvertieren Sie innerhtml in Zahlen und führen Sie Berechnungen durch

Question

Ich mache einen einfachen Materialrechner, aber wenn ich die Werte addiere, erhalte ich 27002700 statt 5400 Also habe ich versucht, es in ein Array zu verschieben und .map und Number zu verwenden. Ich habe es ungefähr zehnmal umgeschrieben. Ich habe keine Ideen mehr.

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>