Question

在这个项目中，我需要设置最多10个猜测，表明猜测了什么数字，并在每场比赛结束时将这些结果保留在屏幕上，而不会覆盖之前的猜测。

需要对每组猜测输出进行编号以指示已经进行了多少次猜测。对于输出，我需要使用innerHTML。用户将猜测1到999之间的数字。我必须使用while循环。

到目前为止，这是我工作的代码，我有一些错误而且无法正常工作。谁能让我正确的方向来完成这个代码？

我在检查文档时发现的错误是checkGuess（）函数和带有消息的匿名函数＆＃34;无法读取属性＆＃39;值＆＃39; of null＆＃34;

<script type="text/javascript">
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var guesses = document.getElementById("guesses");
    var lastResult = document.getElementById("lastResult");
    var lowOrHi = document.getElementById("lowOrHi");
    var guessSubmit = document.getElementById("guessSubmit");
    var guessField = document.getElementById("guessField");
    var guessCount = 1;

    function checkGuess() {
        var userGuess = Number(guessField.value);
        guesses.innerHTML += userGuess + "";
    }

    while (guessCount == 10) {
        lastResult.innerHTML = "!!!GAME OVER!!!";
        disableForm();
    } else {

        if (userGuess == randomNumber) {
            lastResult.innerHTML = "Congratulations! You got it right!";
            lowOrHi.innerHTML = "";
            disableForm();
        } else {
            lastResult.innerHTML = "Wrong!";
            if (userGuess < randomNumber) {
                lowOrHi.innerHTML = "Your guess is too low!";
            } else if (userGuess > randomNumber) {
                lowOrHi.innerHTML = "Your guess is too high!";
            }
        }
        guessCount++;
        guessField.value = "";
    }
    }

    function disableForm() {
        var wholeForm = document.querySelector(".form"); // grab a reference to the whole form (the contents of the div with class form)
        wholeForm.style.opacity = 0.5; // change the opacity of the form to 0.5
        guessField.setAttribute("disabled", "disabled");
        guessSubmit.setAttribute("disabled", "disabled"); // disable the form field and submit button so they can no longer be used
    }
    guessSubmit.onclick = checkGuess;
</script>


</head>

<body>
    <h1>Number guessing game</h1>
    <p id="guesses"></p>
    <p id="lastResult"></p>
    <p id="lowOrHi"></p>

    <div class="form">
        <label for="guessField">Enter your next guess: </label>
        <input type="text" id="guessField">
        <button id="guessSubmit">Enter Guess</button>
    </div>

    <p></p>
</body>

</html>

Answer 1

你的程序错了，实际上什么都不做

实际执行的唯一事情就是你职能之外的一切，并且只有在第一次加载页面时才会调用它们

要执行CheckGuess，您需要实际调用它：

 <button id="guessSubmit" onclick="checkGuess() ">Enter Guess</button>

但实际上在您的函数之外的所有其他内容仅在页面加载时执行

你也有一段时间 - 否则声明，这甚至都不可能然后又......它在一个函数之外，所以它没用了

您需要将所有内容放在一个语句中你不需要一个人一旦你在页面上写下了什么，它就会一直存在，直到它重新加载如果你这样写一段时间，你就会无休止地循环你的代码。

这个代码和逻辑在很多方面都是错误的，我会向你发送一个功能代码：

<script type="text/javascript">
var guesscount =0;
var randomNumber = Math.floor(Math.random() * 100) + 1;  

    function checkGuess() 
    {
        guesscount = guesscount  +1;
        var userGuess = document.getElementById("guessField").value;
        document.getElementById('guesses').innerHTML += Number(userGuess)+ '<br>';
        CheckResults();    


    }

    function CheckResults()
    {
        //add here your logics if the number is wrong
        if ( guesscount>= 10)
        {
             document.getElementById("guessField").disabled = true;
             document.getElementById("guessSubmit").setAttribute('disabled', 'disabled'); 
             document.getElementById('guesses').innerHTML += 'game Over !';
        }
    }

</script>


</head>

<body>
    <h1>Number guessing game</h1>
    <label id="guesses"></label>
    <label id="lastResult"></label>
    <label id="lowOrHi"></label>

    <div class="form">
        <label for="guessField">Enter your next guess: </label>
        <input type="text" id="guessField">
        <button id="guessSubmit" onclick="checkGuess() ">Enter Guess</button>
    </div>

    <p></p>
</body>

</html>

数字猜测游戏使用while循环

1 个答案: