setproperty Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

innerHTMLプロパティを使用すると、JavaScriptを使用して要素のコンテンツを定義できます。

無効な要素値を指定した場合これを使用してinnerHTMLメソッドを使用するか、要素がページに表示される前にスクリプトを配置すると、「Uncaught TypeError:Unable to set the "innerHTML"null"property」というエラーが発生します。エラー

このガイドでは、このエラーの意味と、エラーが発生する理由について説明します。このエラーの例を見て、JavaScriptで修正する方法を学ぶことができます

UncaughtTypeError:。プロパティ「innerHTML」をnullに設定できません

InnerHTMLプロパティは、JavaScriptを使用しているWeb要素にリンクされています。 getElementById()などの「getter」を使用してページからWeb要素を選択したか、JavaScriptで変更する要素を作成しました。

「プロパティ`innerHTML`をnullに設定できません」エラーはタイプエラーです。これは、プロパティまたは関数をサポートしていない値にプロパティまたは関数を適用しようとしていることを意味します。

この場合、innerHTMLの値を等しい要素に設定しようとしています。 。ヌル。 NULL値はinnerHTMLプロパティではありません

このエラーの一般的な原因は2つあります。

  • アイテムがWebページに表示される前にスクリプトを挿入する
  • 間違ったアイテムIDを参照してください。

根本的な原因を分析します。これは、おそらく初心者が犯す最も一般的な間違いです。

シナリオ例

時間を示す簡単なサイトを作成します。まず、基本的なHTMLページを定義します。このHTMLページは、天気を表示するキャンバスになります:<! DOCTYPE html>

このHTMLページには タグには、Webページのタイトルを定義する

  </pre></code>が含まれています。 <code> <body></code>には段落が含まれています</p> </a> </div> <p>段落に、<a href="/ html-span /"> <span></a>。このタグのコンテンツをJavaScriptコードの現在の時刻に置き換えます</p><p>次に、時刻を取得するスクリプトを記述します。このJSコードを<code><head></code>に追加します:.. </p> <p>ドキュメントにHTMLとJavaScriptが含まれるようになりました。<code>getElementById()</コード>私たちのスパを取得しますnタグ<code>SHOW_TIME</code>。次に、<ah ref = "/ JavaScrip t-Date/">JavaScriptモジュールの日付</a>タグを使用して現在の日付を取得します。</p><p>次のコード行で、次のコードを表示する文字列を作成します。その日の現在の時間とその時間の分。この文字列は次の構造を使用します。</p><p> <code> HH:MM </code> </p><p>時間と分の値を区切る2つのピリオドがあります。この文字列は、<ahref="/javascript-string-interpolation/">JavaScript文字列補間</a>と呼ばれる手法を使用して作成します。これにより、複数の値を同じチェーンに統合できます。最後に、innerHTMLメソッドを使用して、今回はWebページに表示します</p><p>WebブラウザでLetを開きます。</p><figureclass=`wp-画像ブロック-" > <IMG SRC = "https://lh6.googleusercontent.com/anZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU-YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ_qdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw "ALT =" AnZ4ckRYEF5OaualeffjXeLSKVdoZPV32w1Nl8cpU YEy5nQeJ0KGFVR1DRUUwylZjjqemanwOj5z7NlgdEQ QdcgAYzjdRMP9gFpr7tv4llZiOidmnmavbFUMa2ljCLqw"> </フィギュア> <P>私たちのウェブページには、時間を表示することはできません。私たちはJavaScriptコンソールを見れば、エラーが表示されます:</p>  <p>これは、「`innerHTML`プロパティをnullに設定できません」の別の表現です。innerHTMLの値をゼロに設定しようとしている要素がゼロであることを示しています。</p><h2>解決策</h2> <p> <code> SHOW_TIME </code>の値はゼロなので、JavaScであると推測できます。 riptは、IDが<code> SHOW_TIME</code>の要素を正しく取得できませんでした。</p><p>この場合、原因は<code><;を入力したことです。スクリプト></code>スケジュールが早すぎます。 <code>  ... </pre> </div> <p> <code>  </div><h2>結論</h2><p>エラー「UncaughtTypeError:Unable to set property`innerHTML` null」エラーは、値が要素のinnerHTML値を設定しようとしたときに発生します。はゼロです。</p><p>このエラーを修正するには、<code> <script> </code>がスクリプトで選択する要素の後にあることを確認してください。これで問題が解決しない場合は、プログラムで有効なアイテムを選択してください。</p>