我正在尝试同时获取我的最终警报消息“祝贺...”并且HTML背景颜色更改同时发生。 之后发生颜色变化我点击已经显示的警报消息的“确定”按钮。我哪里错了？
不可否认，有一个类似的问题，尽管我没有从建议的解决方案中得到任何指示。
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>
答案 0 :(得分：3)
这里实际上有两件事。如评论中所述，Javascript是单线程的，在执行下一条指令之前，警报框会等待您的点击。在您的情况下，一种可能性是在显示警告框之前简单地更改颜色：
//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.");
但这里还有其他事情发生。看起来即使您先关闭命令来更改背景颜色，警告框也会在之前触发指令（更改颜色）结束。警报框会停止浏览器中的线程，并且还必须包含颜色更改指令。我不确定这是不是一个bug。我只在Chrome中尝试过，所以我不确定其他浏览器。
解决此问题的一种方法是将警报框放在延迟计时器上，如下所示：
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);
以下是一个工作示例：https://jsfiddle.net/Lzcht5dz/1/
答案 1 :(得分：0)
在警报框被解除之后，您的javascript的下一行才会运行。您可以使用不会暂停执行的console.log（），而不是使用alert（）。
编辑：我的不好，你希望用户看到它。作为下面建议的评论者，只需在显示警报（）之前更改背景颜色。答案 2 :(得分：0)
alert()停止脚本直到被解雇。
尝试将alert()替换为display()，并将display()定义为：
function display(a){
document.getElementById("display").innerHTML = a;
}
确保HTML中包含ID为display的元素。