document.getElementByIdからドキュメントが取得されない

JavaScriptを学習していて、Atom（テキストエディタ）を使用しています。私はこれだけだ私のHTMLファイルで：私のjavascriptのファイルで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>

は、私は単にこれを使用して「表示ドス」ボタンにアクセスしようとしています：

var displayTodosButton = document.getElementById('displayTodosButton')

私はビデオを見ていました、インストラクターはplnkr.coを使用していますが、ボタンにはアクセスできますが、Atomでは「ReferenceError：ドキュメントは定義されていません。」

どうすればこの問題を解決できますか？

出典

2016-12-19 JDev

スクリプトが入っています要素が利用可能になる前にスクリプトが実行されている可能性がありますが、それは記述しているエラーではなく 'null'を与えるだけです。 – adeneo

@ T.J.Crowder単純なIDE /テキストエディタ – George

ああ、*その* Atom。 –

yet on Atom I get

あなたが本当にアトム、テキストエディタは、それを強調し、あなたにdocumentが未定義であることを示す警告が表示されていることを意味している場合、それはアトムはあなたがそのコードを実行している気付いていないだけということですブラウザコンテキストでdocumentが定義されます。

おそらく、ブラウザでコードを実行していることを示す設定があるため、デフォルトのグローバルセット（window、documentなど）と見なすことができます。

script.jsのコードがエラーアトムは（ブラウザで、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拡張機能が役立つ場合があります。

すべての主要ブラウザが提供する開発者ツールを使用して、エラーレポートが表示されます。

（NB：最初に表示されるエラーは、this question and answerで説明されています）。

出典

2016-12-19 15:13:17 Quentin

"script"パッケージ（NodeJSコンテキスト内にある）でJSコードを実行しようとしているようです。あなたが実際にやりたいことは、あなたのウェブブラウザでそれを実行することです。だから、index.htmlをあなたのお気に入りのブラウザに開き、魔法を見てください:)

出典

2016-12-19 15:13:52 Cohars

これはAtomの問題ではありません。の前にscript.jsを右にと呼んでいるので、DOMはロードされていないので、ドキュメントは未定義です。

script.jsでコードをラップはこれでファイル：

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

か、ここのようなHTMLドキュメントの最後にscript.jsファイルを呼び出す：

<!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からドキュメントが取得されない

答えて

関連する問題