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

Я создал игру с угадыванием с использованием JavaScript. Вначале я написал его в кодефене, где он работал нормально, и когда я переместил его на возвышенное, чтобы проверить его в браузерах как автономный, код не работал. Я получаю эту ошибку: «Uncaught TypeError: Не могу прочитать значение свойства« null при угадывании », которое является строкой 14 var guessValue = parseInt (guessIn.value); и ссылается на HTML строки 20, которая является GuessJavaScript, возвращающий значение 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> 
 
\t <legend>The Game Starts Now</legend> 
 
\t <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> 
 
\t <p>Good luck.</p> 
 

 
    <div id="guessingarea"> 
 
\t <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>

источник

2016-10-22 Katrinka Swenson

Вы пробовали делать какие-либо отладки? – Carcigenicate

Вы включили сценарий, до того, как элемент доступен. Как только синтаксический анализатор попадет в 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>

Query элементы каждый раз, когда внутри метода 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, который убеждается элементы доступны на этой странице.

источник

2016-10-22 18:27:08

Спасибо! О, черт возьми, так просто, и это сводило меня с ума! –

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

document.getElementById('userGuess');

вызывается перед тем, как существует элемент userGuess.

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

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

источник

2016-10-22 18:31:00 crispmark

Большое спасибо! Теперь это так важно, что я вижу это. –

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

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

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

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

источник

2016-10-22 18:41:15

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

ответ

Смежные вопросы