對於簡單猜謎遊戲的函數，返回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

回答

相關問題