web-dev-qa-db-ja.com

JavascriptはIDで要素を見つけることができませんか？

_<html>
<head>
    <title>Test javascript</title>

    <script type="text/javascript">
        var e = document.getElementById("db_info");
        e.innerHTML='Found you';
    </script>
</head>
<body>
    <div id="content">
        <div id="tables">

        </div>        
        <div id="db_info">
        </div>
    </div>
</body>
</html>
_

alert(e);を使用すると、null....が表示され、画面上に "found found"が表示されないことは明らかです。私は何を間違えていますか？

javascriptgetelementbyid
23
Bluemagica

問題は、要素が存在する前にアクセスしようとしていることです。ページが完全にロードされるまで待つ必要があります。可能なアプローチは、onloadハンドラーを使用することです。

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

ただし、最も一般的なJavaScriptライブラリはDOM対応のイベントを提供します。 window.onloadもすべての画像を待機するため、これは優れています。ほとんどの場合、それは必要ありません。

もう1つの方法は、スクリプトタグを閉じる</body>- tagの直前に配置することです。これは、実行時にその前のすべてがロードされるためです。

56
jwueller

スクリプトタグ内でコードを実行するタイミングをブラウザーはどのように知るのですか？したがって、ウィンドウが完全にロードされた後にコードを実行するには、

window.onload = doStuff;

function doStuff() {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
}

もう1つの方法は、<script...</script>終了直前</body> 鬼ごっこ。

2
dheerosaur

bodyタグを閉じる直前に、onloadイベントでコードを実行します。あなたはそれをする瞬間にそこにない要素を見つけようとします。

1
Ionuț Staicu

要素が存在する前にスクリプトが呼び出されます。

次のいずれかを試してください。

  1. コードを関数にラップし、body onloadイベントを使用して呼び出します。
  2. ドキュメントの最後にスクリプトを配置
  3. スクリプトタグ宣言にdefer属性を使用します
1
Dave

スクリプトは、ボディのDOMが構築される前に実行されます。すべてを関数に入れて、body要素のonloadから呼び出します。

0
sjngm