你如何總結從javascript輸入中獲得的多個值？

Question

這是我一直在做的一系列練習的一部分，也是我唯一無法完成的練習（我是 Javascript 初學者）。 練習說“創建一個輸入和一個按鈕，以便每次輸入一個值時，總值都會存儲在一個變量中。創建另一個按鈕，按下時會顯示累積的總數。”

我試過這個：

JavaScript：

function ex15Save(ex15Num){
    let num1 = document.getElementById("ex15Num");
    var ex15Num = num1;
    let ex15Storage;
    ex15Storage += ex15Num;
}

HTML：

<label>Number to store 
<input id="ex15Num" type="number"> </label>
<button onclick="ex15Save()">Save Total</button>
<button onclick="ex15Show()">Show total</button>
<p id="ex15Total"></p>

我知道代碼甚至還沒有接近完成，但它已經到了我的大腦無法理解如何在不覆蓋變量值的情況下存儲值的總和的地步。

Answer 1

您需要在這里做一些事情，但基本邏輯如下：

創建一個新變量 ( total )，並在每次單擊按鈕時將輸入的值添加到其中。 您會注意到使用parseFloat()來確保可以添加該值。

 const input = document.getElementById('ex15Num'); const output = document.getElementById('ex15Total'); const saveButton = document.getElementById('ex15SaveButton'); const showButton = document.getElementById('ex15ShowButton'); let total = 0; saveButton.addEventListener('click', (e) => { e.preventDefault(); const toAdd = parseFloat(input.value); if (!isNaN(toAdd)) { total+= toAdd; input.value = ''; } }); showButton.addEventListener('click', (e) => { e.preventDefault(); output.innerText = total; });

 <label for="ex15Num">Number to store</label> <input id="ex15Num" type="number"> <button id="ex15SaveButton">Save Total</button> <button id="ex15ShowButton">Show total</button> <p id="ex15Total"></p>

此外，避免使用侵入式事件處理程序，而是使用addEventListener綁定您的事件。

Answer 2

 /* Declare ex15Storage outside the function otherwise it will reset everytime the function is called */ let ex15Storage = 0; function ex15Save(){ let num1 = document.getElementById("ex15Num"); /* the num1 is an object so you want the value from it.. also format the value to number Otherwise 0 + "123" = 0123 // num + string is numstring value */ let ex15Num = Number(num1.value); ex15Storage += ex15Num; console.log(ex15Storage) } function ex15Show(){ document.getElementById("ex15Total").innerHTML = ex15Storage; }

 <label>Number to store <input id="ex15Num" type="number"> </label> <button onclick="ex15Save()">Save Total</button> <button onclick="ex15Show()">Show total</button> <p id="ex15Total"></p>