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

Question

I try to get 5 inputs and output the sum in the end. The problem I don't know how to wait for an event ( onclick ), especially without settimeout or another time function.

This is the code:

 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

Because you are relying on the user pressing a button each time, you shouldn't be using a loop in the first place. Just use a counter to keep track of how many times the function has been run and when you reach the desired amount, prevent the function from doing more addition.

You also need to make sure to update the total within the function, not outside of it.

NOTES:

Since you aren't submitting any data anywhere, you shouldn't be using a form or a submit button. A regular button is all you want.

Set up events using .addEventListener() , rather than event properties like onclick .

Don't use .innerHTML when there is no HTML in the string, use .textContent instead.

 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>