2

Ok。私はまだこのs***dの問題に1時間取り組んでいるので、新鮮な目が必要です！

これが、javascriptスクリプトを含む私の単純なHTMLコード（testssio.html）です。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.html = "it finally works!";
    </script>
</head>
<body>
    <div id="ssio"></div>
</body>
</html>

しかし、それは機能しません！デバッガーを使用すると、次のようになります。

Uncaught TypeError: Cannot set property 'html' of null          /testssio/:6

誰かがそれを手に入れますか？デバッグのヘルプを探すのに適切な場所ではないことはわかっていますが、それがわからないと夢中になります。だから、助けてください。

事前にTahnks。

4

4 に答える 4

5

これは、ページがレンダリングされる前にヘッド内のスクリプトが読み込まれるためです。これは、コンテンツがまだレンダリングされていないため、の一部ではないことを意味しますdocument。

この動作を確認したい場合は、次のように、スクリプトを要素のレンダリングの下に移動してみてください。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "it finally works!";
</script>
</body>
</html>

これを行うためのより標準化された方法は、イベントを使用することです。多くの人がjQueryを使用していますが、プレーンjsで実行できます。これは、次のようにスクリプトを変更することを意味します。

<script type="text/javascript">
  function WinLoad() {
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "It finally works!";
  }
  window.onload = WinLoad;
</script>

このようにして、それをに残すことができます<head>。

また、使用.htmlはjQueryからです。通常はとして使用され.html(content)ます。プレーンなJavaScriptバージョンを使用する場合は、を使用します.innerHTML = content。

jQueryは非常によく使用されるAPIであるため、私はjQueryについて多く言及します。この引用は彼らのサイトからのものです：

jQueryは、高速で簡潔なJavaScriptライブラリであり、HTMLドキュメントのトラバース、イベント処理、アニメーション化、およびAjaxインタラクションを簡素化して、迅速なWeb開発を実現します。jQueryは、JavaScriptの記述方法を変更するように設計されています。

于 2012-09-09T16:41:31.027 に答える
2

DOMが読み込まれる前にコードの実行が早すぎるdocument.getElementById()ため、ドキュメント内の要素がまだ見つかりません。

スクリプトタグをタグの直前に移動するか</body>、DOMが読み込まれるのを待ってから、windowonloadイベントまたはDOMReadyイベントを使用してコードを実行することができます。

于 2012-09-09T16:41:30.497 に答える
1

ここには2つのエラーがあります。まず、要素の後にSCRIPTタグを付ける必要があります。次に、.htmlではなく.innerHTMLです。修正されたコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="ssio"></div>
        <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.innerHTML = "it finally works!";
    </script>
</body>
</html>
于 2012-09-09T16:44:44.210 に答える
0

あなたはこのようなものを使うことができます 

  <!DOCTYPE html>
    <html>
   <head>
    <script type="text/javascript">
   document.onload= function(){
    var ssio = document.getElementById('ssio');
    ssio.html = "it finally works!";
    }
</script>
</head>
<body>
<div id="ssio"></div>

于 2012-09-09T16:45:45.163 に答える