Menu
I'm trying to get both my final Alert message "Congratulations..." and the HTML background color change to happen simultaneously. The color change happens after I click on the 'Ok' button of the already displayed Alert message. Where am I going wrong?
Admittedly, there is a similar question, though I didn't get any pointers from the suggested solutions.
let myColors = ["red", "purple", "blue",
"orange", "violet", "green",
"amber", "olive", "navy",
"maroon", "lime", "yellow", "chartreuse",
"crimson", "wheat", "deeppink",
"gold", "beige", "turquoise"
];
let yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
function yourGuessedColor() {
while (myColors.indexOf(yourColor) <= -1) {
alert("Sorry, I don't recognize your color.\n\nPlease try again.");
yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
}
return yourColor;
}
let guessedColor = yourGuessedColor();
let guesses = 1;
function colorGame() {
let myFavColor = myColors[Math.floor(Math.random() * myColors.length)];
while (guessedColor != myFavColor) {
if (guessedColor > myFavColor) {
alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again.");
guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
} else {
alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again.");
guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
}
guesses++;
document.body.style.backgroundColor = myFavColor;
}
return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Guessing Game</title>
</head>
<body onload="colorGame()">
<script type="text/javascript">
</script>
</body>
</html>
611
There are actually two things going on here. As noted in the comments, Javascript is single-threaded and an alert box waits for your click before executing the next instruction. In your case, one possibility would be to simply change the color before showing the alert box:
//CHANGE THE COLOR BEFORE ALERTING
document.body.style.backgroundColor = guessedColor;
return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");
But there is also something else going on here. It looks like even if you fire off the command to change the background color first, the alert box gets fired off before the instruction (to change the color) finishes. An alert box stops the thread in the browser, and that must include the color change instruction as well. I'm not sure if this is a bug or not. And I've only tried it in Chrome, so I'm not sure about other browsers.
One way you can get around this is to put your alert box on a delayed timer, like this:
document.body.style.backgroundColor = guessedColor;
var alertMsg = "Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.";
setTimeout(function(){alert(alertMsg)},100);
Here is a working example: https://jsfiddle.net/Lzcht5dz/1/
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With