0

私は JavaScript を学習しようとしています..そして例に従おうとしています..そして、この getElementById を正しく動作させることができません.実際の段落ではなく、警告ボックスに Null と表示されているのはなぜですか?

<html>
  <head>    
    <script type="text/javascript">
    var x = document.getElementById('excitingText');
    alert(x);
   </script>  
  </head>

  <body>
    <h1>This is a header!</h1>
    <p id="excitingText">
      This is a paragraph! <em>Excitement</em>!
    </p>
    <p>
      This is also a paragraph, but it is not nearly as exciting as the last one.
    </p>

  </body>

</html>
4

4 に答える 4

4

実行すると

var x = document.getElementById('excitingText');
    alert(x);

ページの読み込みが完了していません。中に入れるwindow.onloadか、ページの最後に入れると機能します。試す：

window.onload = function() {
      var x = document.getElementById('excitingText');
                alert(x);
 }

もしくは最後に入れます。でも中に入れたほうがいいwindow.onload。

<html>
  <head>    

  </head>

  <body>
    <h1>This is a header!</h1>
    <p id="excitingText">
      This is a paragraph! <em>Excitement</em>!
    </p>
    <p>
      This is also a paragraph, but it is not nearly as exciting as the last one.
    </p>
   <script type="text/javascript">
    var x = document.getElementById('excitingText');
    alert(x);
   </script>  
  </body>

</html>
于 2013-06-25T03:45:24.393 に答える
3

これは、要素が存在する前にスクリプトが読み込まれるためです。window.onloadそのため、DOM がロードされた後に確実に実行されるように、下に配置してみてください。または、このようにページの最後に移動します。

これを試して：

 window.onload = function() {
      var x = document.getElementById('excitingText');
                alert(x);
 }

フィドル

于 2013-06-25T03:45:19.000 に答える
1

要素が DOM に配置される前に、要素の参照を使用しています。「$(document).onload()」に同じコードを入れると動作します

$(document).onload(function(){
     var x = document.getElementById('excitingText');
     alert(x);
});
于 2013-06-25T03:49:49.910 に答える
1

で同じものを使用することもできます:

 $(document).ready(function(e) {
      var x = document.getElementById('excitingText');
      alert(x); 
 });

他の方法と同じですが、別の方法が 1 つあります。

于 2013-06-25T03:52:48.953 に答える