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

您的代码存在一些问题：

• 你需要通过大括号}来结束你的功能
• 在)声明结束时删除answer
• 假设您希望您的游戏只使用一个随机数而不是每次猜测都不改变它，您可以将var x = Math.floor((Math.random() * 100) + 1);移到playGame()函数之外。这样，x将只设置一次，而不是每次输入新的猜测
• 虽然不需要，但每次使用answer时都无需重新初始化var变量。正如您已经声明的那样，您可以通过引用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 2

代码中存在语法错误。在)语句中删除尾随的右括号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 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!");
}

为什么还有额外的）在每个声明的最后？你能尝试在第一个answer之外定义变量if然后为它赋值吗？

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>