你如何总结从javascript输入中获得的多个值？答案

【问题标题】：How do you sum multiple values gotten from inputs in javascript?你如何总结从javascript输入中获得的多个值？
【发布时间】：2022-10-22 16:24:55
【问题描述】：

这是我一直在做的一系列练习的一部分，也是我唯一无法完成的练习（我是 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>

我知道代码甚至还没有接近完成，但它已经到了我的大脑无法理解如何在不覆盖变量值的情况下存储值的总和的地步。

【问题讨论】：

这回答了你的问题了吗？ How get total sum from input box values using Javascript?
1) 你需要num1.value 而不仅仅是num1，2) 如果你把你的变量声明放在函数之外，它将在调用之间保持它的值。
还有：How to get sum of input values?

标签： javascript

【解决方案1】：

/* 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>

【讨论】：

好的，我什至不必等待，这个答案是正确的，它工作得很好，它非常紧凑，当我与我的代码进行比较时，我立即明白错误是什么，非常感谢。
请考虑将答案标记为正确答案:)

【解决方案2】：

您需要在这里做一些事情，但基本逻辑如下：

创建一个新变量（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 绑定您的事件。

【讨论】：

非常感谢您抽出宝贵时间回答我的问题，尽管此回答超出了我的范围，但我已经能够获得更多知识，并且我相信它会对接下来的练习有所帮助。当我的老师有空闲时间时，我会和他谈谈，我会尝试更新这个问题，但是我会解决这个问题。再次，非常感谢。

【解决方案3】：

试试这个简化的功能

let inputEl = document.getElementById("number1");
let totalEl = document.getElementById("total");
let total = 0;

let sumx = function(...nums){
  return nums.reduce((a, b) => a + b, 0);
}

let addition = () => {
  total = sumx(total,parseInt(inputEl.value));
  totalEl.innerHTML = total;
}

<input value="0" type="text" id="number1">
<button onclick="addition()">ADD</button>
<h1 id="total">00</h1>

【讨论】：