javascript - 用户在 HTML Javascript 中输入的所有数字的总和

Question

我需要帮助来创建一个函数:

1. 包含计算到目前为止用户输入的所有数字的总和信息，打印到控制台，并存储在 HTML 页面上。
2. 当总和大于 100 时，该函数将“结束”打印到控制台。

有什么建议吗？以下是我到目前为止所得到的:

function adder() {
  var num1 = parseInt(document.getElementById("myform").elements["num1"].value);
  var num2 = parseInt(document.getElementById("myform").elements["num2"].value);
  var total = num1 + num2;
  document.getElementById("p1").innerHTML = total;
}

<form id="myform">
  First Number: <input type="text" name="num1"><br /><br /> Second Number: <input type="text" name="num2"><br /><br />
</form>
<button onclick="adder()"> Submit</button><br><br>
<p id="p1">Results Are Here</p>

Answer 1

你应该定义并初始化total至 0外面adder()这样您就可以将字段值添加到现有总和中。这是一个例子:

var total = 0;

function adder() {
  var num1 = parseInt(document.getElementById("myform").elements["num1"].value);
  var num2 = parseInt(document.getElementById("myform").elements["num2"].value);
  total += num1 + num2;
  document.getElementById("p1").innerHTML = total;
  if (total > 100) console.log("It's over!");
}

<form id="myform">
  First Number: <input type="text" name="num1"><br /><br /> Second Number: <input type="text" name="num2"><br /><br />
</form>
<button onclick="adder()"> Submit</button><br><br>
<p id="p1">Results Are Here</p>

如果您的 <button> 附带说明是你的 <form> 的一部分，会导致页面刷新，所以加入type="button"在这种情况下解决了这个问题，您可以正确地看到结果。