Question

我在JS这里是一个菜鸟，我正在做我的作业，制作一个简单的猜色游戏。到目前为止，一切都符合标准。

我唯一的问题是我无法弄清楚如何制作它以便在用户输入后立即改变背景（在提示下单击[确定]后）。截至目前使用下面的代码，只有在Congrats警报中单击[确定]后背景才会改变。我很确定这是可能的，因为我的教授在讲座中展示了他在猜测正确后背景颜色发生变化的例子颜色！

此外，如果有任何专业人士可以给我建议抛光我的代码将是很好的。我觉得它比它想要实现的东西更麻烦，更复杂......嘿......

PS：我知道js逻辑应该在页面中分开，但我的教授坚持我们使用内联脚本进行练习！

谢谢！

<body onload="doGame()">
    <script>
        var myBody = document.getElementsByTagName("body")[0];
        var target;
        var answer;
        var guessInputText;
        var guessInput;
        var finished = false;
        var guessAmount = 0;
        var colors = ['Salmon', 'Tomato', 'Moccasin', 'Peru', 'Olive', 'Teal', 'Navy', 'Thistle', 'Beige', 'Gray'];
        var colorsSorted = colors.sort();
        var colorsSortedString = colors.join(', ');

        function doGame() {
            var randomColorNum = Math.random() * 10;
            var randomColorNumInt = Math.floor(randomColorNum);
            target = colors[randomColorNumInt + 1];
            answer = target.charAt(0).toLowerCase() + target.slice(1).toLowerCase(); //makes sure answer is in lowercase
            alert("The answer is " + target + " or " + answer); //for debugging

            while(!finished) {
                guessInputText = prompt('I am thinking of one of these colors:\n\n' +
                                        colorsSortedString + '\n\n' +
                                        'What color am I thinking of?');
                guessInput = guessInputText.charAt(0).toLowerCase() + guessInputText.slice(1).toLowerCase(); //converts whatever input into lowercase
                guessAmount += 1;
                finished = checkGuess(); //checks to see if user input is correct
            }
        }

        function checkGuess() {
            if ((colors.indexOf(guessInputText.charAt(0).toUpperCase() + guessInputText.slice(1).toLowerCase()) > -1) == false) {
                alert("Sorry, I don't recognize your color.\n\n" +
                        "Please try again!");
                return false;
            }
            if (guessInput > answer) {
                alert("Sorry, Your guess is incorrect!\n\n" +
                        "Hint: Your color is alphabetically higher than mine.\n\n" +
                        "Please try again!");
                return false;
            }
            if (guessInput < answer) {
                alert("Sorry, Your guess is incorrect!\n\n" +
                        "Hint: Your color is alphabetically lower than mine.\n\n" +
                        "Please try again!");
                return false;
            }
                myBody.style.background = answer;
                alert("Congratulations! You have guessed the color!\n\n" +
                        "It took you " + guessAmount + " guesses to finish the game!\n\n" +
                        "You can see the color in the background.");
                return true;
    }
    </script>
</body>

Answer 1

如果你想在恭喜打印[OK]之前修改背景，你只需要移动这一行

myBody.style.background = answer;

但是..测试你的代码片段后，我在猜测颜色提示下按OK后背景就会改变。

那你到底想要什么？你能一步一步给我们一个例子吗？

迅速回答后迅速改变背景

1 个答案: