Tukar innerhtml kepada nombor dan buat pengiraan

Question

Saya sedang membuat kalkulator bahan mudah tetapi apabila saya menjumlahkan nilai saya mendapat 27002700 dan bukannya 5400 Jadi saya cuba menolaknya ke tatasusunan dan menggunakan .map dan Number, Saya menulis semula kira-kira 10 kali. Saya kehabisan idea.

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

Jadi, saya rasa apa yang anda perlukan ialah kaedah reduce untuk menjumlahkan semua nilai.

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>