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

JavaScript returning null on a function for a simple guessing game

本文关键字：游戏 函数 null 返回 简单 一个 JavaScript      更新时间：2023-09-26

我使用JavaScript创建了一个猜谜游戏。最初，我用codepen编写它，它运行得很好，当我把它转移到sublime，在浏览器中作为一个独立的测试时，代码不能工作。我得到这个错误:"未捕获的类型错误:无法读取属性'值'的null在猜测"，这是第14行var guessValue = parseInt(guessIn.value);并链接到第20行HTML，即Guess

我不知道null是从哪里来的。我做错了什么或者没有正确定义什么导致了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>

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

document.getElementById('userGuess');

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

我可以想到两种解决方案，要么在文档末尾包含脚本，要么只在需要时访问该元素，而不是像这样在开头声明它: 
var guessValue = parseInt(document.getElementById('userGuess').value);

在元素可用之前已经包含了脚本。一旦解析器碰到JS文件，它就会停止页面的呈现并尝试解析javascript。当遇到脚本时，元素仍然不可用。

你有两种选择来完成这个工作。

将script标签移动到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，以确保元素在页面上可用。

如果将变量声明移到函数内部，它将正常工作。问题是JavaScript代码在文档准备好之前执行，所以guessIn和guessOut变量初始化为null。

或者你可以把JavaScript代码包装在一个函数中，当DOM完成后执行。

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

相关文章：