2010-12-21 25 views
18
<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となります。明らかに私は画面上に「あなたが見つかりました」ということはありません。私は間違って何をしていますか?JavascriptはIDで要素を見つけることができませんか?

+0

食品の終わりに

  • プット・スクリプト? ID "db_info"のDIVはいつ作成されているか保証されていますか? –

  • 答えて

    40

    問題は、要素が存在する前に要素にアクセスしようとしていることです。ページが完全に読み込まれるまで待つ必要があります。しかし、

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

    最も一般的なJavaScriptライブラリは、DOM-readyイベントを提供します。可能なアプローチはonloadハンドラを使用することです。 window.onloadがすべての画像を待っているので、これは良いことです。ほとんどの場合、その必要はありません。

    もう1つの方法は、実行時にその前にあるすべてがロードされるため、終了タグの直前にスクリプトタグを配置することです。

    +2

    +1のwindow.onloadと無名関数の^^ –

    0

    スクリプトは、本体のDOMが構築される前に実行されます。それをすべて関数に入れてbody-elementのonloadから呼び出します。

    1

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

    1

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

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

    他の代替だけで終了</body>タグの前に、あなたの<script...</script>を維持することです。

    1

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

    次のいずれか試してみてください:関数に

    1. ラップコードを、それを呼び出すためにボディのonloadイベントを使用します。 JavaScriptのコードブロックが実行さん:スクリプトタグの宣言に文書
    2. 使用の延期属性の思考のための
    関連する問題