document.getElementByID
を使用して、外部 JS ファイルから HTML ファイルから情報を取得しようとしましたが、機能していないようです。HTML ファイルとインラインである場合にのみ機能しますか、document.getElementByID
それとも外部 JS ファイルで適切に機能しますか? 他の機能が動作しているため、JS ファイルは HTML ドキュメント内で適切に呼び出されます。
5 に答える
まず、document.getElementById("xxx")
, notを使用していることを確認してくださいdocument.getElementByID("xxx")
(末尾の大文字の違いに注意してください)。あなたの質問は、document.getElementByID("xxx")
ここで問題になる可能性があることを示しています。
次に、関連する DOM 項目がブラウザーによって解析された後に関数が実行されるようにする必要があります。セクションにロードされ、ロード直後に実行されるdocument.getElementById
外部 JS ファイルに を配置する場合、DOM はまだ準備ができていません。<head>
いくつかのオプションがあります:
1)<script>
ボディの最後、タグの直前に外部 JS ファイル タグを配置します</body>
。これにより、ページの読み込み/表示が速くなるだけでなく、JS ファイル内の何かが実行される前に DOM が解析されることが保証されます。
<body>
Your HTML here
<script type="text/javascript" src="myscript.js"></script>
</body>
2) jQuery があるので、すぐに実行されるコードを$(document).ready(fn)
ブロック内に配置して、DOM の準備が整うまで jQuery が実行を保留するようにします。このようにすると、コードをどこにでも配置できます (必要に応じて<head>
セクション内を含む)。
$(document).ready(function() {
// put your page initialization code here
});
3)コードを好きな場所に配置しますが、すぐに実行する必要はありません。代わりに、すべての初期化コードを初期化関数に入れます (呼び出す元の関数を呼び出しましょうmyPageInit()
:
$(document).ready(myPageInit);
4)コードを好きな場所に配置しますが、すぐに実行する必要はありません。代わりに、すべての初期化コードを初期化関数に入れます (次のようにタグmyPageInit()
の直前にスクリプトから呼び出すようにしましょう:</body>
<script type="text/javascript">myPageInit()</script>
document.getElementByID は、HTML ファイルとインラインである場合にのみ機能しますか?
いいえ。
外部JSファイルで正しく動作しますか?
はい。
document.getElementById()
DOM の準備が整う前に呼び出している可能性があります。
私の提案はこれを行うことです:
window.onload = function () {
// document.getElementById() code here
}
次にdocument.getElementById()
、ページ上のすべての要素が完全に読み込まれるまで実行されません。
スクリプトを に配置すると<head>
、本体がまだロードされていないため、要素が存在しません。
jQuery の関数を使用してスクリプトを延期するか、スクリプトを本文の最後に配置します。