1

変数の設定に問題があり、役立つドキュメントが見つかりません。

これは機能します：

<!DOCTYPE html>
<html>
 <body onload="alert(document.getElementById('foo').firstChild.nodeValue)">
  <a id="foo" href="old">Foobar</a>
 </body>
</html>

しかし、これは機能しません：

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   var theText = document.getElementById('foo').firstChild.nodeValue ;
  </script>
 </head>
 <body onload="alert(theText)">
  <a id="foo" href="old">Foobar</a>
 </body>
</html>

アラートには「未定義」と表示されます。私が本当にやりたいのは、このようなものですが、これも機能しません。

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
    var theElement = document.getElementById('foo') ;
    var theText = theElement.firstChild.nodeValue ;
    document.write(theElement.getAttribute('href')) ;
    theElement.setAttribute('href', theText) ;
    document.write(meta.getAttribute('href')) ;
  </script>
 </head>
 <body>
  <a id="foo" href="old">Foobar</a>
 </body>
</html>

なぜこれが機能しないのですか？

4

1 に答える 1

1

スクリプトを実行すると、foo要素は存在しません。JavaScriptコンソールを確認すると、次の行に沿ってエラーが表示されます。

Uncaught TypeError：nullのプロパティ'firstChild'を読み取ることができません

探している要素が見つからない場合getElementByIdに返されるため、このエラーが発生します。null

マークアップ後にJavaScriptコードを実行する必要があります。scriptタグをの下部に移動するbodyか、DOM準備完了/ロードイベントハンドラーに配置します。例えば：

<body onload="alert(theText)">
    <a id="foo" href="old">Foobar</a>
    <!-- Now the `foo` element actually exists, our script can find it -->
    <script type="text/javascript">
        var theText = document.getElementById('foo').firstChild.nodeValue;
    </script>
</body>
于 2012-09-27T10:16:46.537 に答える