JavaScript 在一个简单的猜谜游戏的函数上返回 null答案

【问题标题】：JavaScript returning null on a function for a simple guessing gameJavaScript 在一个简单的猜谜游戏的函数上返回 null
【发布时间】：2017-03-04 21:03:37
【问题描述】：

我使用 JavaScript 创建了一个猜谜游戏。最初，我在 codepen 中编写它，它运行良好，当我将它移到 sublime 以在浏览器中作为独立的测试它时，代码不起作用。我收到此错误：“Uncaught TypeError: Cannot read property 'value' of null atguess”，即第 14 行 var guessValue = parseInt(guessIn.value);并链接回第 20 行的 HTML，即 Guess

我不知道 null 是从哪里来的。我做错了什么或没有正确定义导致空值？我删除了 CSS 以使其空白，并确保它没有搞砸任何事情。

//Generate random number between 1 and 500

var randomNumber = Math.floor((Math.random() * 500) + 1);

//Create variables to store info for loops and displaying info back to user
var guessIn = document.getElementById('userGuess');
var guessOut = document.getElementById('guessesMade');
var counter = 0;

//function runs when the guess button is hit

function guess() {
  //declare temp local var and store as an integer for conditional testing
  var guessValue = parseInt(guessIn.value);
  
  //if statement for finding the value and reporting to the user
  //check if the counter is less than 10 and guessValue is not empty
    if (counter < 10 && guessValue) {
      counter++;
    }  
  //the guess is correct
    if (guessValue == randomNumber) {
      guessOut.value = guessOut.value + '\n' + "Guess " + counter + " is " + guessIn.value + ':' + ' You have correctly guessed the number. You may escape.';
    }
  // the guess is greater
    if (guessValue > randomNumber) {
      guessOut.value = guessOut.value + '\n' +"Guess " + counter + " is " + guessIn.value + ':' + ' Your guess is incorrect. The number I am thinking of is lower.';
    }
  //the guess is lower
    if (guessValue < randomNumber) {
      guessOut.value = guessOut.value + '\n' + "Guess " + counter + " is " + guessIn.value + ':' + ' Your guess is incorrect. The number I am thinking of is higher.';
    }
  //when all 10 guesses are used
  else if (counter == 10) {
    guessOut.value = guessOut.value + '\n' + "You did not guess the number I was thinking, " + randomNumber + "." + " You have met your end. Goodbye.";
  }
  return false;
}

//Show the number to guess upon clicking the checkbox for Cheat
function cheat() {
  if (document.getElementById('cheat').checked) {  document.getElementById('cheatNumber').value = randomNumber;
    document.getElementById('cheatShow').style.display = 'inline';
  }
  else {  document.getElementById('cheatNumber').value = '';
 document.getElementById('cheatShow').style.display = 'none';
  }
}

//function to reset the game
function reset() {
  //reset guess value
  userGuess.value = "";
 //reset text area 
  guessesMade.value = "";
  //reset counter
  counter = 0;
  //set new random number for play
  randomNumber = Math.floor((Math.random() * 500) + 1);
  return false;
}

<html>
<head>
<title>Do You Wanna Play A Game?</title>

<script src="game.js"></script>
</head>

<body>
<h1>Do You Wanna Play A Game?</h1>
<h3>A Guessing Game</h3>

<fieldset>
	<legend>The Game Starts Now</legend>
	<p>Welcome. You have stumbled upon this page. As a consequence, you have been trapped. To get out, the objective is simple.</p>
  <p>I am thinking of a number. This number is between 1 and 500. You get ten guesses.</p>
	<p>Good luck.</p>

  <div id="guessingarea">
	<input type="text" id="userGuess" value="394" /><br />
  <button onClick="guess();">Guess</button>
  <button onClick="reset();">Reset</button>
    <br />
  <input id="cheat" type="checkbox" value="cheat" onClick="cheat();" />
  <label for="cheat">Cheat</label>
  <div id="cheatShow" style="display: none;">
  <input id="cheatNumber" type="text"/>
  </div>
  </div>
</fieldset>
<p></p>
  <fieldset>
    <legend>Let's examine your guess, shall we?</legend>
    <textarea id="guessesMade"  rows="14" style="width: 100%;"></textarea>
  </fieldset>
</body>
</html>

【问题讨论】：

你试过调试吗？

标签： javascript function null typeerror

【解决方案1】：

看起来您在 html 文档之前包含了脚本。

document.getElementById('userGuess');

在元素 'userGuess' 存在之前调用。

我可以想到两种解决方案，要么在文档末尾包含脚本，要么仅在需要时访问此元素，而不是像这样在开头声明它：

var guessValue = parseInt(document.getElementById('userGuess').value);

【讨论】：

非常感谢！现在我看到了，这很有意义。

【解决方案2】：

在元素可用之前，您已包含脚本。一旦解析器命中 JS 文件，它将停止页面的渲染并尝试解析 javascript。当遇到脚本时，该元素仍然不可用。

您有 2 个选项可以完成这项工作。

将脚本标签移动到body 元素的关闭之前。这将确保页面在操作之前具有可用的元素。

     <fieldset>
        <legend>Let's examine your guess, shall we?</legend>
        <textarea id="guessesMade"  rows="14" style="width: 100%;"></textarea>
     </fieldset>

     <script src="game.js"></script>
</body>

每次在 guess 方法中查询元素，因为它仅在单击操作时调用，这仅在页面呈现后发生。

function guess() {

    var guessIn = document.getElementById('userGuess');
    var guessOut = document.getElementById('guessesMade');

    //declare temp local var and store as an integer for conditional testing
    var guessValue = parseInt(guessIn.value);

    ......
    ......

它在代码笔上工作的原因是，执行的脚本被推迟到onLoad，这确保了页面上的元素可用。

【讨论】：

谢谢！哦，天哪，太简单了，简直快把我逼疯了！

【解决方案3】：

如果您在函数内移动变量声明，它将起作用。问题是 JavaScript 代码在文档准备好之前执行，因此guessIn 和guessOut 变量被初始化为null。

或者，您可以将 JavaScript 代码包装在一个函数中，该函数将在 DOM 完成时执行。

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    // your code goes in here
  }
}

更多详情请见MDN。

【讨论】：