Convertissez innerhtml en nombres et effectuez des calculs

Question

Je fais un simple calculateur de matériaux mais quand je additionne les valeurs j'obtiens 27002700 au lieu de 5400 J'ai donc essayé de le pousser vers un tableau et d'utiliser .map et Number, Je l'ai réécrit environ 10 fois. Je suis à court d'idées.

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' Idem.

Donc, je pense que ce dont vous avez besoin, c'est de la méthode reduce pour additionner toutes les valeurs.

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>