对于简单猜谜游戏的函数，返回null返回null

我使用JavaScript创建了一个猜谜游戏。最初，我将它写在codepen中运行良好的代码中，当我将它移到崇高处以在浏览器中作为独立进行测试时，代码无法工作。我得到这个错误：“未捕获的TypeError：无法读取属性'值'在猜测null”这是第14行var guessValue = parseInt（guessIn.value）;并链接回第20行，这是猜测对于简单猜谜游戏的函数，返回null返回null

的HTML我不知道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> 
 
\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>

查询的元素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变量被初始化为null。

或者，您可以将您的JavaScript代码封装在DOM完成时将执行的函数中。

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

查看MDN了解更多详情。

来源

2016-10-22 18:41:15

对于简单猜谜游戏的函数，返回null返回null

回答

相关问题