JavaScript在一个简单的猜谜游戏的函数上返回null
[英]JavaScript returning null on a function for a simple guessing game
问题描述
我用JavaScript创建了一个猜谜游戏。 最初，我在codepen中编写了它，它运行良好，当我将它移动到sublime以在浏览器中作为独立测试时，代码不起作用。 我收到此错误：“未捕获的TypeError：无法在读取时读取null的属性'值'”这是第14行var guessValue = parseInt（guessIn.value）; 并链接回第20行的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> <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>
3 个解决方案
解决方案1
0 2016-10-22 18:27:08
在元素可用之前，您已包含脚本。 一旦解析器命中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 ，这确保了元素在页面上可用。
解决方案2
0 2016-10-22 18:31:00
看起来你在html文档之前包含了脚本。
document.getElementById('userGuess');
在元素'userGuess'存在之前调用。
我可以想到两个解决方案，要么在文档的末尾包含脚本，要么只在需要时才访问此元素，而不是像开头那样声明它：
var guessValue = parseInt(document.getElementById('userGuess').value);
解决方案3
0 2016-10-22 18:41:15
如果在函数内部移动变量声明，它将起作用。 问题是JavaScript代码在文档准备好之前执行，因此guessIn和guessOut变量初始化为null。
或者，您可以将JavaScript代码包装在将在DOM完成时执行的函数中。
document.onreadystatechange = function () {
if (document.readyState === "complete") {
// your code goes in here
}
}
有关详细信息，请参阅MDN 。
用Javascript编写的简单猜谜游戏程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.