Question

我正在制作一个“猜我的数字”游戏并遇到了问题。我的游戏应该选择1到10之间的随机整数，并允许用户猜测，直到他们猜出正确的数字。在每次猜测之后，我应该显示一条消息，告诉他们的猜测是否太高，太低，正确，或者他们之前是否猜到了这个数字。我通过使用警报来显示用户是否太高，低，正确等等，从而使游戏正常工作（显示以前猜到的数字数组除外）。

if (guess == this.num) {
    alert("Correct! It took you " + turns " tries to guess my number.");
    ...
}

然而，回过头来看，我发现我们不应该使用警报或任何其他类型的弹出窗口。所以我需要弄清楚如何在屏幕上而不是在警告框中显示这些消息。

以下是我在没有使用警报的情况下尝试这样做的方法，但现在游戏根本不起作用（当我点击任一按钮时没有任何反应）：

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <title>Guess My Number</title>

        <script type="text/javascript">
            var tries = [];
            var game = {
                num : 0,
                turns : 1,
                reset : function() {
                    this.turns = 1;
                    this.newNum();
                },
                newNum : function() {
                    this.num = parseInt(Math.random() * 10) +1;
                },
                guessNumber : function(guess) {
                    try {
                        guess = parseInt(guess);
                    }
                    catch(e) {
                        alert("Enter a guess!");
                        this.turns++;
                        return false;
                    }

                    if (guess == this.num) {
                        document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.");
                        alert("Correct! It took you " + this.turns + " turns to guess my number.");
                        tries.push(guess);
                        document.querySelector("#tries").textContent = tries.join(', ');
                        document.getElementById("guess").value = " ";
                        return true;
                    }
                    else if(guess > this.num) {
                        document.getElementById("result").value = "Your guess is too high. Try again.";
                        alert("Your guess is too high. Try again.");
                        document.querySelector("#tries").textContent = tries.join(', ');
                        this.turns++;
                        document.getElementById("guess").value = " ";
                        return false;
                    }

                    else if(tries.indexOf(guess) != -1) {
                        document.getElementById("result").value = "You have already guessed this number. Try again.";
                        this.turns++;
                        document.getElementById("guess").value = " ";
                        return false;
                    }
                    else {
                        document.getElementById("result").value = "Your guess is too low. Try again.";
                        document.querySelector("#tries").textContent = tries.join(', ');
                        tries.push(guess);
                        this.turns++;
                        document.getElementById("guess").value = " ";
                        return false;
                    }
                }
            };

            function guessNumber() {
                var guess = document.getElementById("guess").value;
                game.guessNumber(guess);
                document.getElementById("guess").value = " ";
            }

            function resetGame() {
                game.reset();
                document.getElementById("guess").value = " ";
            }

            resetGame();
        </script>
    </head>

    <body>
        <h1>Would You Like To Play A Game?</h1>
        <h2>Thank you for checking out my game. Good luck!</h2>
        <h3>Created by Beth Tanner</h3>
        <h2>Directions:</h2>
        <p>
            The game is very simple. I am thinking of a number between 1
            and 10. It is your job to guess that number. If you do not guess
            correctly on your first attempt, don't worry, you can keep guessing 
            until you guess the correct number.
        </p>
        <p>
            Your Guess: <input type="text" id="guess" size="10" />
            <br />
            <input type="button" value="Sumbit Guess" onclick="guessNumber()" />
            <input type="reset" value="Reset Game" onclick="resetGame()"/>
        </p>
        <h3>How Did You Do?:</h3>
        <p>
            <input type="hidden" id="result" size="20" />
        </p>
        <h3>Here Are Your Guesses So Far:</h3
    </body>
</html>

有没有简单的方法可以做到这一点。我希望消息显示在标题“你怎么做？：”下面的隐藏文本中，如果这样可以让它更清晰一点。

这是我用最新代码http://jsfiddle.net/3p3f86fj/6/

制作的jsfiddle

Answer 1

您应该使用唯一ID（例如<div id='result'></div>）向您的身体添加div，然后在您的JS中，通过ID获取文档来引用它，您的函数应该将div的文本更改为您需要的任何内容它是。如果要抽象出一些逻辑，请创建一个更改名称的函数。

Answer 2

由于这条线路它被打破了我相信：

document.getElementById("result").value = "Correct! It took you " + this.turns + " tries to guess my number.");

你最后有一个迷路)。

我正在调查我现在看到的其他问题。

不使用警报显示消息

2 个答案: