javascript - 如何在VANILLA JS中的for循环内等待事件？

Question

我尝试获取 5 个输入并最终输出总和。问题是我不知道如何等待事件 (onclick)，尤其是没有 settimeout 或其他时间函数。

这是代码:

var sum = 0;
var input = document.getElementById("input");

document.getElementById("submit").onclick = function(e) {
  e.preventDefault();
  for (var i = 0; i < 5; i++) {
    sum += parseInt(input.value);
    input.value = "";
    //wait until the user submit another value
  }
}

document.getElementById("answer").innerHTML = sum;

<form>
  <input type="text" id="input">
  <input type="submit" id="submit">
</form>
<p id="answer">answer</p>
<script src="script.js"></script>

Answer 1

因为您依赖于用户每次按下按钮，所以您不应该首先使用循环。只需使用计数器来跟踪函数已运行的次数，以及当达到所需数量时，阻止函数执行更多添加操作。

您还需要确保在函数内部更新总计，而不是在函数外部。

注释:

由于您没有在任何地方提交任何数据，因此您不应使用表单或提交按钮。一个常规的按钮就够了。

使用 .addEventListener() 设置事件，而不是像 onclick 这样的事件属性。

当字符串中没有 HTML 时，不要使用 .innerHTML，而是使用 .textContent。

var sum = 0;
var count = 0;
var input = document.getElementById("input");
var answer = document.getElementById("answer");
var total = document.getElementById("total");

total.addEventListener("click", function (e) {
  count++;   // Increase the counter
  
  // Check to see if we've reached the count
  if(count >= 5){ 
    this.disabled = "disabled";
    input.value="";
    answer.textContent = "The final total is: " + sum;
    return; // Exit the function
  }
  
  sum+=parseInt(input.value);
  input.value="";
  answer.textContent = sum;
  alert("Enter the next number and press the button.");
});

<input type="text" id="input">
        <input type="button" id="total" value="Add to Total">

    <p id="answer"></p>
   <script src="script.js"></script>