JavaScript函数无法打印

Question

我是JavaScript的新手，正在做一个上课的项目。 到目前为止，还没有任何问题，直到出现此问题为止，在我输入输入内容时，什么都不会打印。 当我输入问题时，根本没有任何变化。 这个问题只是应该创建一个随机数，看看用户是否猜对了。

<script>
function playGame() {
    var answer;
    var x = Math.floor((Math.random() * 100) + 1);
    var name = document.getElementById('name').value;
    var guess = document.getElementById('guess').value;
    if (x > guess) {
    var answer = "Guess is too low!");
    }
    else if (x < guess) {
    var answer = "Guess is too high!");
    }
    else if (x == guess) {
    var answer = "You guessed correctly!");
    }
    document.getElementById('final').innerHTML = "Answer: " + answer;
</script>

<h2>Random Number Game by </h2>
    <p>Enter Name: 
       <input id="name" type="text">
    </p>
    <p>Enter Guess: <input id="guess" type="number" min="1" max="100" onchange="playGame()"></p>
    <h2 id="final"></h2>

Answer 1

代码中存在语法错误。 在if..else语句中删除结尾的右括号（ ) 。 document.getElementById('final').innerHTML = "Answer: " + answer; 应该在函数内。 var answer; 只需在脚本开头声明一次即可。

定义x的undefined之外playGame ，设置x如果undefined ，当x == guess设置x为undefined 。

 <script> let x; function playGame() { var answer; if (!x) { x = Math.floor((Math.random() * 100) + 1) }; var name = document.getElementById('name').value; var guess = document.getElementById('guess').value; if (x > guess) { answer = "Guess is too low!"; } else if (x < guess) { answer = "Guess is too high!"; } else if (x == guess) { answer = "You guessed correctly!"; x = void 0; } document.getElementById('final').innerHTML = "Answer: " + answer; } </script> <h2>Random Number Game by </h2> <p>Enter Name: <input id="name" type="text"> </p> <p>Enter Guess: <input id="guess" type="number" min="1" max="100" onchange="playGame()"></p> <h2 id="final"></h2> 

Answer 2

您的代码有一些问题：

• 您需要以花括号结束以关闭函数}
• 删除answer声明末尾的)
• 假设您希望游戏只使用一个随机数，而不是每次猜测都保持不变，则可以将var x = Math.floor((Math.random() * 100) + 1); 在playGame()函数之外。 这样， x只会设置一次，而不是每次输入新的猜测时
• 尽管不需要它，但不必每次都使用var继续重新初始化您的answer变量。 正如已经声明的那样，您可以通过引用answer来重新定义它

请参见下面的工作示例：

 <script> var x = Math.floor((Math.random() * 100) + 1); function playGame() { var answer; var name = document.getElementById('name').value; var guess = document.getElementById('guess').value; if (x > guess) { answer = "Guess is too low!"; } else if (x < guess) { answer = "Guess is too high!"; } else if (x == guess) { answer = "You guessed correctly!"; } document.getElementById('final').innerHTML = "Answer: " + answer; } </script> <h2>Random Number Game by </h2> <p>Enter Name: <input id="name" type="text"> </p> <p>Enter Guess: <input id="guess" type="number" min="1" max="100" onchange="playGame()"></p> <h2 id="final"></h2> 

Answer 3

对我来说，追踪似乎是错误的-

if (x > guess) {
    var answer = "Guess is too low!");
}
else if (x < guess) {
    var answer = "Guess is too high!");
}
else if (x == guess) {
    var answer = "You guessed correctly!");
}

为什么在每个语句的末尾都有额外的）？ 您可以尝试先if之外定义变量answer ，然后再为其赋值吗？

Answer 4

• 更正了一些来自代码的错别字。
• innerHTML语句应位于函数内部。
• 使用oninput事件而不是onchange事件，因为它将在从任何源输入任何输入时触发处理程序功能。

 function playGame() { var answer; var x = Math.floor((Math.random() * 100) + 1); var name = document.getElementById('name').value; var guess = document.getElementById('guess').value; if (x > guess) { var answer = "Guess is too low!"; } else if (x < guess) { var answer = "Guess is too high!"; } else if (x == guess) { var answer = "You guessed correctly!"; } document.getElementById('final').innerHTML = "Answer: " + answer; } 

 <h2>Random Number Game by </h2> <p>Enter Name: <input id="name" type="text"> </p> <p>Enter Guess: <input id="guess" type="number" min="1" max="100" oninput="playGame()"></p> <h2 id="final"></h2> 

Answer 5

它不起作用的原因是因为您没有该函数的右括号，并且在定义answer每一行上都有多余的括号：

 function playGame() { var answer; var x = Math.floor((Math.random() * 100) + 1); var name = document.getElementById('name').value; var guess = document.getElementById('guess').value; if (x > guess) { var answer = "Guess is too low!"; } else if (x < guess) { var answer = "Guess is too high!"; } else if (x == guess) { var answer = "You guessed correctly!"; } document.getElementById('final').innerHTML = "Answer: " + answer; } 

 <h2>Random Number Game by </h2> <p>Enter Name: <input id="name" type="text"> </p> <p>Enter Guess: <input id="guess" type="number" min="1" max="100" onchange="playGame()"></p> <h2 id="final"></h2>