If user inputs a value less than 5, I want the inner.html to update and the user to be prompted again. The code is functional on its own, but I want it to do an inner.html update AND the user to be prompted again, instead of having just the prompt without the inner.html changing.
Edit: I don't think this is a duplicate, the other question asks when and how reflow operations occur. But it doesn't solve the problem I have, which is to update inner.html before prompting, unless there's something I missed.
players = []
function numberOfPlayers() {
playerCount = prompt("Please enter number of players. A minimum of 5 players is required.", "5");
if (playerCount === null) {
return;
}
if (parseInt(playerCount) >= 5) {
document.getElementById("intro").innerHTML =
"There are " + playerCount + " players.";
namesOfPlayers(playerCount);
} else {
document.getElementById("intro").innerHTML =
"Invalid. A minimum of 5 players is required. Hit the button to try again."
numberOfPlayers(); //I want it to update the text before calling numberOfPlayers() again
//the prompt pops up without the text changing.
}
}
function namesOfPlayers(playerCount) {
for (i = 1; i <= playerCount; i++) {
var playerName = prompt("Enter name of player " + i, "John Doe")
players.push(playerName)
}
document.getElementById("names").innerHTML =
"The players are " + players.toString();
}
</script>
<p id="intro">Click the button to begin the game.</p>
<button onclick="numberOfPlayers()">Begin</button>
<p id="names"></p>