獲取文件沒有定義，從的document.getElementById

我學習JavaScript和我使用的Atom（文本編輯器）。在我的HTML文件，我只拿到了這一點：獲取文件沒有定義，從的document.getElementById

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 
<body> 
    <h1>Hello Plunker!</h1> 
    <button id="displayTodosButton">Display Todos</button> 
    <button>Toggle Todos</button> 
</body> 
</html>

在我的JavaScript文件，我只是試圖訪問使用此「顯示待辦事項」按鈕：

var displayTodosButton = document.getElementById('displayTodosButton')

我在看視頻，教師正在使用plnkr.co，他訪問按鈕就好了，但在Atom上我得到「ReferenceError：document is not defined」

我該如何解決這個問題？

來源

2016-12-19 JDev

腳本是在頭部，元素在體內，所以腳本可能在元素可用之前運行，但這隻會給你'null'，而不是你描述的錯誤。 – adeneo

@ T.J.Crowder一個簡單的IDE /文本編輯器 – George

哦，* that * Atom。 –

yet on Atom I get

如果你真的這樣想的Atom，文本編輯器，是突出它並顯示你一個警告，document是不確定的，它只是原子不知道你正在運行的代碼在將定義document的瀏覽器上下文中。

它可能有一個環境，讓你可以告訴它，你將運行在瀏覽器的代碼，因此它可以承擔全局（window，document等）的默認設置。

如果script.js的代碼只是你已經證明什麼，儘管錯誤的Atom是顯示你不會是一個問題（因爲在瀏覽器中，document不會undefined），你會得到null從getElementById返回，因爲您的代碼在元素存在之前運行。再次，這是假設代碼是自己的，而不是（例如）在DOMContentLoaded處理程序或類似的。

除非你有一個很好的理由這樣做（有沒有很多），把script元素在head是一個反模式。把它們放在body的最後，就在結束</body>標記之前。這樣，上面定義的任何元素都將在代碼運行之前由瀏覽器創建。

來源

2016-12-19 15:03:03

你打正試圖執行使用Node.js的JS文件的一些菜單項或組合鍵

您的代碼，但是，設計運行，嵌入在網頁中，利用Web瀏覽器提供的API。

Web瀏覽器，在這些情況下，將提供一個document對象。 Node.js不會。

您需要在Web瀏覽器打開HTML文檔。 open in browser擴展可能會有用。

您可以看到使用的開發工具所有主要的瀏覽器供應的任何錯誤報告。

（注：你會遇到，然後通過this question and answer解釋的第一個錯誤）。

來源

2016-12-19 15:13:17 Quentin

它看起來像你想運行在原子的「腳本」包（這是在上下文中的NodeJS）JS代碼。你真正想做的是在你的網頁瀏覽器中運行它。因此，只需在您最喜歡的瀏覽器中打開index.html並看到神奇:)

來源

2016-12-19 15:13:52 Cohars

這不是Atom的問題。您在調用script.js 之前 DOM已加載，因此文檔未定義。

總結你的代碼中的script.js與此文件：

$(document).ready(function() { 
    $(function() { 
     //Do my stuff 
    }); 
});

或致電的script.js在HTML文檔的最後文件喜歡這裏：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <h1>Hello Plunker!</h1> 
    <button id="displayTodosButton">Display Todos</button> 
    <button>Toggle Todos</button> 

    <script src="script.js"></script> 
</body> 
</html>

來源

2017-07-21 14:11:51 Lefan

獲取文件沒有定義，從的document.getElementById

回答

相關問題