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