Question

我创建了一个猜数字游戏，您在其中输入数字作为用户并尝试获取与计算机选择的数字相同的数字。计算机会在1-100之间选择一个数字，每次您猜测时，它都会告诉您是否需要猜测更高或更低。

问题出在Java脚本中，我正在考虑是我写错了东西还是不是应该写的东西。我已经检查了所有ID和所有内容，但仍然无法从代码中获得任何反馈。

我希望代码在尝试按猜测按钮时能够输出一些内容

<!DOCTYPE html>

<html>

<head>
  <title>GuessingGame</title>
  <style>

  </style>
  <script>
    var playerGuess = document.getElementById("guessInput").value;
    var computerGuess = Math.floor(Math.random() * 10 + 1);
    var playAgain = true;

    function randNum(low, high) {
      var number = Math.floor(Math.random() * high + low);
      return number
    }

    function guessNumber() {
      if (playerGuess > computerGuess) {
        document.getElementById("output").innerHTML =
          "Guess lower"
      } else if (playerGuess < computerGuess) {
        document.getElementById("output").innerHTML =
          "Guess higher"
      } else(playerGuess == computerGuess) {
        document.getElementById("output").innerHTML =
          "Good job you guessed right"
      }
  </script>
</head>

<body>
  <h1>Guessing Game</h1>
  <h2>The computer will choose a number between 1 and 100</h2>
  <h2>You have to try and guess what it picked</h2>
  <span><input type="number" id="guessInput">
    <button onclick="guessNumber();">Guess</button><button
    onClick="reset();">Reset</button>
    <p id="output"></p>

    </body>

    </html>

Answer 1

您的某些javascript代码编写不正确，而某些HTML无效。在这里，我已经将变量从全局范围移到了函数，因为在这里创建变量更有意义，并且每次单击按钮时变量都会改变，而不仅仅是onload：

<!DOCTYPE html>
<title>GuessingGame</title>
<html>
  <body>
    <h1>Guessing Game</h1>
    <h2>The computer will choose a number between 1 and 100</h2>
    <h2>You have to try and guess what it picked</h2>
    <span><input type="number" id="guessInput"/></span>
    <button onclick="guessNumber();">Guess</button>
    <button onClick="reset();">Reset</button>
    <p id="output"></p>
  </body>
  <script>
    var computerGuess = Math.floor(Math.random() * 10 + 1);
    var playAgain = true;

    function randNum(low,high) {
        var number = Math.floor(Math.random()*high+low);
        return number
    }
    function guessNumber(playerGuess) {
        var playerGuess = document.getElementById("guessInput").value;
        if (playerGuess > computerGuess) {
            document.getElementById("output").innerHTML = "Guess lower"
        } else if (playerGuess < computerGuess) {
            document.getElementById("output").innerHTML = "Guess higher"
        } else {
            document.getElementById("output").innerHTML = "Good job you guessed right"
        }
    }
  </script>
</html>

您需要编写reset()函数以使按钮执行任何操作：）

Answer 2

无效的HTML（跨度包含文本，没有输入字段和段落）并且没有关闭
缺少大括号
如果再否则else(playerGuess == computerGuess) {
在字段存在之前访问它-解决方案：将代码移动到</body>之前的HTML之后，或者在这种情况下，单击时在调用的函数中访问该字段
无法在您测试的函数中得到猜测
不使用randNum函数

function randNum(low, high) {
  var number = Math.floor(Math.random() * high + low);
  return number
}

function guessNumber() {
  var playerGuess = +document.getElementById("guessInput").value;

  if (playerGuess > computerGuess) {
    document.getElementById("output").innerHTML = "Guess lower"
  } else if (playerGuess < computerGuess) {
    document.getElementById("output").innerHTML = "Guess higher"
  } else {
    document.getElementById("output").innerHTML = "Good job you guessed right"
  }
}

var computerGuess = randNum(1, 10);

<h1>Guessing Game</h1>
<h2>The computer will choose a number between 1 and 10</h2>
<h2>You have to try and guess what it picked</h2>
<div><input type="number" id="guessInput">
  <button type="button" onclick="guessNumber();">Guess</button><button onClick="reset();">Reset</button>
  <p id="output"></p>
</div>

猜谜游戏可能出现的语法错误

2 个答案: