javascript - Javascript猜测游戏

我是javascript和html的新手，所以我希望有人可以偷看我的代码并告诉我为什么某些语法不起作用。在下面的代码中，我每次使用document.getElementById检索我想使用的元素。我确实将它们声明为gameTime（）中的局部变量，并在整个函数中使用它。

    var randNum = Math.floor( 100*Math.random() ) +1;
    var numGuesses = 0;

    function gameTime()
    {
        var guess = document.getElementById("guess").value;
        var status = document.getElementById("status");

        numGuesses++;

        if(guess == "")
        {
            alert("You did not guess a number!")
            numGuesses--;
        }
        else if(guess == randNum)
            status.value += (guess + " was the right number! It only took you " + numGuesses + " tries" + "\r")
        else if(guess > randNum)
            status.value += (guess + " is too high!" + "\r")
        else
            status.value += (guess + " is too low!" + "\r")

        document.getElementById("guess").value = "";
    }

    function reset()
    {
        randNum = Math.floor( 100*Math.random() ) +1;
        numGuesses = 0;
        document.getElementById("guess").value = "";
        document.getElementById("status").value = "";
    }

    function quit()
    {
        document.getElementById("status").value += ("The correct number was " + randNum + "!\r")
    }

然后，我尝试通过全局声明这两个元素并在似乎根本不起作用的每个函数中使用它来进行尝试，而我只是不明白为什么。

    var randNum = Math.floor( 100*Math.random() ) +1;
    var numGuesses = 0;
    var guess = document.getElementById("guess").value;
    var status = document.getElementById("status");

    function gameTime()
    {
        numGuesses++;

        if(guess == "")
        {
            alert("You did not guess a number!")
            numGuesses--;
        }
        else if(guess == randNum)
            status.value += (guess + " was the right number! It only took you " + numGuesses + " tries" + "\r")
        else if(guess > randNum)
            status.value += (guess + " is too high!" + "\r")
        else
            status.value += (guess + " is too low!" + "\r")

        guess.value = "";
    }

    function reset()
    {
        randNum = Math.floor( 100*Math.random() ) +1;
        numGuesses = 0;
        guess.value = "";
        status.value = "";
    }

    function quit()
    {
        status.value += ("The correct number was " + randNum + "!\r")
    }

这是这些js文件随附的html文件，guess.js是第一个代码块，guessAgain.js是第二个代码块。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Guessing Game</title>
            <script type="text/javascript" src="guessAgain.js"></script>
        </head>
        <body>
            <label for = "guess"> Your Guess: </label>
            <input type = "text" id = "guess" value = "" />
            <input type = "button" onclick = "gameTime()" value = "Submit" />
            <input type = "button" onclick = "reset()" value = "New Game" />
            <input type = "button" onclick = "quit()" value = "Quit" />
            <br>
            <textarea id = "status" rows = "10" cols = "52"></textarea>
        </body>
    </html>

感谢您提供的任何见解。

最佳答案

问题1：
您在加载主体之前调用以下内容，因此它们返回未定义。

var guess = document.getElementById("guess");
var status = document.getElementById("status");

仅当主体加载onload()事件后，才应执行这些操作。

问题2：

同样，当您将值本身分配给变量时，它不会像文本框一样被更新。 var guess = document.getElementById("guess").value，则如果更改文本框，则guess的值不会更新。

如果引用var guess = document.getElementById("guess")，则反复调用
guess.value将返回输入字段的最新值。

(Working Example)

以下是不必要的错误。

        numGuesses++;
        if(guess.value == "")
        {
            alert("You did not guess a number!")
            numGuesses--;
        }
        ...

取而代之的是，您可以在numGuesses被认为是有效猜测后即在最后增加。

关于javascript - Javascript猜测游戏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11806185/