我们如何通过JavaScript循环迭代地接受来自单一输入表单的输入?

Question

我有以下代码，我想知道我问的问题是否可以实现:

var sum = 0;
while (document.getElementById("number").value != 0) { //while the user keeps on entering >0, add to sum
sum = sum + document.getElementById("number").value;
}
document.getElementById("resultpara").value = sum;

<form>
<label for="number">Enter a number:</label>
<input type="text" name="number" id="number">
<label for="number">Result:</label>
<label for="resultpara"></label>
<p id="resultpara"></p>
</form>

Answer 1

您将需要一个输入事件侦听器。此外，在表单提交时，页面将刷新(将所有变量值清除为默认值)，除非您停止传播提交事件

var sum=0;
document.getElementById("number").addEventListener("input", function(event) {
var number = Number(event.target.value) || 0;
if (event.target.value !== 0) {
sum += number;
}
document.getElementById("resultpara").textContent = sum;
event.target.value = null;
});

<form>
<label for="number">Enter a number:</label>
<input type="text" name="number" id="number">
<label for="number">Result:</label>            
<label for="resultpara"></label>
<p id="resultpara"></p>

</form>