私のHTMLには次のコードが含まれています。
<div id="msg"></div>
その体の中で。
ヘッドセクションでは、次のようになります。
var msg = document.getElementByID("msg");
しかし、関数内で呼び出すと、次のようになります。
msg.innerHTML = "test";
msg
nullであることを示すエラーを返します。私は何をすべきか?
私のHTMLには次のコードが含まれています。
<div id="msg"></div>
その体の中で。
ヘッドセクションでは、次のようになります。
var msg = document.getElementByID("msg");
しかし、関数内で呼び出すと、次のようになります。
msg.innerHTML = "test";
msg
nullであることを示すエラーを返します。私は何をすべきか?
まず、JavaScriptは大文字と小文字を区別する言語であることを考慮する必要があるため、使用する必要がありますgetElementById
(最後の文字の大文字と小文字を区別してください)。次に、IDで要素を取得する場合は、引数としてIDを渡す必要があります(タグ名ではありません)。
var msg = document.getElementById("msg");
このメソッドの詳細については、MDNを参照してください。
また、重要な注意点の1つは、マークアップが完全に読み込まれたとき、つまりmsg
要素がJavaScriptで「表示」されているときにこのコードを使用することです。これを実現するための1つのオプションは、<script>
タグ(対応するJavaScriptコードを含む)をHTMLの直前のHTMLの最後に配置すること</body>
です。
ヘッドセクションでは、次のようになります。
var msg = document.getElementByID("div");
そこに3つの問題:
そのコードがにhead
あるが、要素がで定義されbody
ている場合、コードの実行時に要素はまだ存在していません。
要素のid
は"msg"
、ではなくdiv
です。div
はそのタグ名であり、一意ではありません。
それgetElementById
は、ではありませんgetElementByID
。
</body>
コードを含むスクリプト要素をページの終了タグの直前に移動し、を使用するdocument.getElementById("msg")
と、問題ないはずです。
ページが要素をロードする前に呼び出しているためです。ドキュメントの準備ができるか、window.onloadが要素を参照するのを待つ必要があります。