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

Question 1

エラーまたはUncaughtTypeErrorが発生するのはなぜですか：nullのプロパティ 'innerHTML'を設定できませんか？私は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>

Question 2

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

Question 3

まず、そもそもなぜそれが起こっているのかという根本的な原因を理解しようとしましょう。

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

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

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

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

スクリプトの並べ替え：この方法で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>

スニペットを展開

イベントフックを使用する：ブラウザのレンダリングエンジンは、window.onloadブラウザがDOMの読み込みを完了したことを示すヒントを提供するイベントベースのフックスルーイベントを提供します。したがって、このイベントが発生するまでに、helloIDを持つ要素がすでに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>

スニペットを展開

Question 4

javascriptにアクション「onload」を実行するように指示できます...これを試してください：

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

Question 5

JSを入れるだけ window.onload

window.onload = function() {

        what();

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

    }

Question 6

ページが読み込まれたらJavaScript部分を実行する必要があるため、bodyタグの最後に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>

スニペットを展開

Question 7

Javascriptはよさそうだ。divがロードされた後に実行してみてください。ドキュメントの準備ができたときにのみ実行してみてください。$(document).readyjqueryで。

Question 8

<!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>

スニペットを展開

Question 9

これが私のスニペットです。試してみてください。私はそれがあなたのために役立つことを願っています。

<!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>

スニペットを展開

Question 10

setTimeoutメソッドを使用して、HTMLが最初に読み込まれることを確認できます。

Question 11

根本的な原因は次のとおりです。JavaScriptコードの前にページ上のHTMLをロードする必要があります。。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）jsコードをHTMLコードの下に移動します

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

Question 12

<!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>

スニペットを展開

Question 13

同じ問題が発生しましたが、nullエラーは、使用していたhtmlを保存していなかったことが原因であることがわかりました。

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

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

Question 14

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

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

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

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

その後。

Question 15

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ファイルにコードを追加します:)

Question 16

あなたは変更する必要があります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> ';

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

Question 17

エラーは、データを設定するHTMLタグを取得していないことを自明です。したがって、タグをJSで使用できるようにすると、データをそれに設定できます。

Question 18

間違いなく、ここでの答えのほとんどは正しいですが、これを行うこともできます。

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

Question 19

私と同じ問題を抱えている可能性のある人のためにこれを追加したいので、説明したようにさまざまな考えられる原因があります。

私の場合、以下に示すように、closedivがありませんでした

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

close divがない場合、子から親へ、または親から子へのトランスバーサルが混乱する可能性があるため、DOM内の要素にアクセスしようとするとエラーが発生します。

Question 20

DOMをロードします。DOMで何かを行うには、最初にそれをロードする必要があります。あなたの場合、<div>最初にタグをロードする必要があります。次に、変更するものがあります。最初にjsをロードすると、その関数はHTMLあなたが要求したことを実行するように探しますが、そのときHTMLはロード中であり、関数はを見つけることができませんHTML。したがって、スクリプトをページの下部に配置できます。<body>タグ内で<div>は、スクリプトにアクセスしたときにDOMが既にロードされているため、関数はアクセスできます。