JavaScript, возвращающий null для функции для простой игры в угадайку

ProgramBox

JavaScript, возвращающий null для функции для простой игры в угадайку

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#javascript #function #null #typeerror

#javascript #функция #null #ошибка типа

Вопрос:

Я создал игру в угадайку, используя JavaScript. Изначально я написал это в codepen, где оно работало нормально, и когда я перенес его на sublime, чтобы протестировать его в браузерах как автономный, код не работал. Я получаю эту ошибку: «Неперехваченная ошибка типа: не удается прочитать значение свойства null при угадывании», которое является строкой 14 var guessValue = parseInt(guessIn.value); и ссылается на HTML строки 20, которая является 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 amp;amp; 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>

Ответ №1:

Похоже, что вы включаете скрипт перед своим HTML-документом.

 document.getElementById('userGuess');

вызывается до того, как элемент ‘userGuess’ существует.

Я могу придумать два решения для этого: либо включить скрипт в конец документа, либо обращаться к этому элементу только тогда, когда он вам нужен, вместо того, чтобы объявлять его в начале вот так:

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

Ответ №2:

Вы включили скрипт до того, как элемент стал доступен. Как только анализатор попадет в JS-файл, он остановит рендеринг страницы и попытается проанализировать javascript. При обнаружении скрипта элемент по-прежнему недоступен.

У вас есть 2 варианта, чтобы заставить это работать.

Переместите тег 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);

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

Причина, по которой это работает в code pen, заключается в том, что выполнение скриптов откладывается на onLoad , что гарантирует доступность элементов на странице.

Ответ №3:

Если вы переместите объявления переменных внутри функции, это сработает. Проблема в том, что код JavaScript выполняется до того, как документ готов, поэтому переменные guessIn и guessOut инициализируются значением null.

В качестве альтернативы вы можете обернуть свой код JavaScript в функцию, которая будет выполняться после завершения DOM.

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

Смотрите MDN для получения более подробной информации.