你如何总结从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>