web-dev-qa-db-ja.com

nullのプロパティ 'innerHTML'を設定できません

エラーまたはUncaught TypeErrorが発生するのはなぜですか：プロパティ 'innerHTML'をnullに設定できませんか？ innerHTMLを理解し、以前に機能していたと思います。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>

</head>

<body>
<div id="hello"></div>
</body>
</html>
javascriptonloadinnerhtml
59
Joshua W

スクリプトのロード時に存在するように、hello divをスクリプトの前に配置する必要があります。

102
Erik Godard

アクション「onload」を実行するようにJavaScriptに指示する必要があります...これを試してください：

<script type ="text/javascript">
window.onload = function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
28
Colyn1337

すべての技術者が問題を解決する方法についてのソリューションを提供していることがわかりますが、そもそもなぜそれが起こっているのかという理由や根本原因に対応している人はいません。

エラーまたはUncaught TypeErrorが発生するのはなぜですか：プロパティ 'innerHTML'をnullに設定できませんか？

ブラウザは常にHTML DOM全体を上から下にロードします。 scriptタグ（HTMLファイルのheadセクションにある）内に記述されたJavaScriptコードは、DOM（bodyタグ内にあるさまざまなHTML要素タグ）がロードされる前であっても、ブラウザーのレンダリングエンジンによって実行されます。 headタグに存在するスクリプトは、DOMで実際にレンダリングされる前であっても、ID helloを持つ要素にアクセスしようとしています。そのため、明らかにJavaScriptが要素を認識できなかったため、null参照エラーが表示されます。

以前のようにどのように機能させることができますか？

ユーザーが初めてページにアクセスするとすぐに、ページに「こんにちは」メッセージを表示します。したがって、DOMが完全にロードされ、hello id要素がアクセス可能/利用可能であるという事実を完全に確信した時点で、コードを接続する必要があります。次の2つの方法で実現できます。

  1. スクリプトの並べ替え：この方法では、hello id要素を含むDOMが既に読み込まれた後にのみスクリプトが起動されます。すべてのDOM要素の後、つまりbodyタグが終了している一番下にあるスクリプトタグを移動するだけで実現できます。レンダリングは上から下に行われるため、スクリプトは最後に実行され、エラーは発生しません。
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="hello"></div>
    
    <script type ="text/javascript">
        what();
        function what(){
            document.getElementById('hello').innerHTML = 'hi';
        };
    </script>
    </body>
    </html>
  1. イベントフックの使用：ブラウザのレンダリングエンジンは、window.onloadイベントを介してイベントベースのフックを提供し、ブラウザがDOMのロードを完了したというヒントを提供します。したがって、このイベントが発生する頃には、hello idの要素がすでにDOMにロードされており、その後この要素にアクセスしようとするJavaScriptが失敗することはありません。そのため、以下のコードスニペットのようなことを行います。 この場合、headタグ内のHTMLドキュメントの最上部にスクリプトが存在しても、スクリプトは機能します。
<!DOCTYPE HTML>
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type ="text/javascript">
            window.onload = function() {
            what();
            function what(){
                document.getElementById('hello').innerHTML = 'hi';
            };
        }
        </script>
        </head>
        
        <body>
        <div id="hello"></div>
        </body>
        </html>
18
RBT

JSをwindow.onloadに入れるだけです

window.onload = function() {

        what();

        function what() {
            document.getElementById('hello').innerHTML = 'hi';
        };

    }
6
RIYAJ KHAN
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = '<p>hi</p>';
    };
</script>  
</body>
</html>
5
user6175882

Javascriptが良さそうです。 divが読み込まれた後に実行してみてください。ドキュメントの準備ができたときにのみ実行してください。 jqueryの$(document).ready。

4
JT Nolan

ページが読み込まれたらJavaScriptパーツを実行する必要があるため、JavaScriptスクリプトを本文タグの最後に配置することをお勧めします

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example</title>

</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>  
</body>
</html>
4
user5323957

SetTimeoutメソッドを使用して、htmlが最初に読み込まれるようにすることができます。

3
Eddy

ここに私のスニペットがあります。私はそれがあなたに役立つことを願っています。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
  
<div id="hello"></div>
  
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
3
user4909217

このエラーは、htmlレンダリングが終了した後にスクリプトをロードした場合でも表示される可能性があります。この例では、コード

<div id="hello"></div>

div内に値がありません。そのため、内部で変更する値がないため、エラーが発生します。あるべきだった

<div id="hello">Some random text to change</div>

その後。

0
Marko Slijepčević

jqueryを< head>に追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

$ document.ready（）を使用：コードは< head>またはmain.jsのような別のファイルに配置できます

1）同じファイルでjsを使用（これを< head>に追加）：

<script>
$( document ).ready(function() {
function what(){
    document.getElementById('hello').innerHTML = 'hi';
};
});
</script>

2）main.jsのような他のファイルを使用（これを< head>に追加）：

<script type="text/javascript" src="/path/to/main.js" charset="utf-8"></script>

main.jsファイルにコードを追加します:)

0
abe312
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
</body>
</html>
0
user2114253

divをpに変更する必要があります。技術的にinnerHTMLとは、<??? id=""></???>部分の中にあることを意味します。

変化する：

<div id="hello"></div>

に

<p id="hello"></p>

やること：

document.getElementById('hello').innerHTML = 'hi';

変わるだろう

<div id="hello"></div> into this <div id="hello">hi</div>

実際には意味がありません。

変更することもできます：

document.getElementById('hello').innerHTML = 'hi';

これに

document.getElementById('hello').innerHTML='<p> hi </p> ';

それを機能させるために。

0
user6175882

私は同じ問題を抱えていましたが、ヌルエラーは、作業していたhtmlを保存していないためであることがわかりました。

参照された要素がページがロードされたときに保存されていない場合は、ロード時にドキュメントに含まれていないため、「null」になります。 window.onloadを使用すると、デバッグにも役立ちます。

これがお役に立てば幸いです。

0
plagueanomicPlague

根本的な原因：ページ上のHTMLはJavaScriptコードの前にロードする必要があります。 2つの方法で解決する：

1）jsコードの前にHTMLの読み込みを許可します。

<script type ="text/javascript">
    window.onload = function what(){
        document.getElementById('hello').innerHTML = 'hi';
    }
</script>

//or set time out like this:
<script type ="text/javascript">
    setTimeout(function(){
       what();
       function what(){
          document.getElementById('hello').innerHTML = 'hi';
       };
    }, 50);
    //NOTE: 50 is milisecond.
</script>

2）HTMLコードの下でjsコードを移動する

<div id="hello"></div>
<script type ="text/javascript">
    what();
    function what(){
        document.getElementById('hello').innerHTML = 'hi';
    };
</script>
0
Pines Tran