Uncaught TypeError: Cannot set properties of null at getElementById() はどのように発生しますか?
「 キャッチされていない TypeError: getElementById() で null のプロパティを設定できません 」は、次の理由で発生する可能性があります。
例 1: Uncaught TypeError の発生: エレメントの優先アクセスのため、getElementById() で null のプロパティを設定できません
この例では、特定の要素を指定する前にアクセスしたために発生したエラーについて説明します。
< 脚本 >
資料。 getElementById ( '頭' ) . インナーHTML = 「JavaScript コンテンツ」 ;
脚本 >
< 中心 >< 体 >
< h2 ID = '頭' > Linuxhint ウェブサイト h2 >
体 > 中心 >
上記のコード行に示されているように、次の手順を適用します。
- まず、「」内に JavaScript コード ブロックを含めます。 <スクリプト> ' 鬼ごっこ。
- ここで、指定された「」に対応する要素にアクセスします。 ID 」を使用して getElementById() ' 方法。
- また、「 インナーHTML アクセスされた要素のコンテンツを更新するプロパティ。
- 「 <本体> 」タグ、指定された「」を持つ見出しを含めます ID 」。
- コードを実行すると、型エラー「 getElementById() で null のプロパティを設定できません 」が発生します。これは、要素「 」が指定される前にアクセスされます。
出力
上記の出力では、要素への事前アクセスが原因で、示されたエラーが表示されていることがわかります。
解決
この場合に発生した上記のエラーは、要素がアクセスされる前に指定されるようにコードを順序付けることによって解決できます。
次の例は、前述の概念を示しています。
< 中心 >< 体 >< h2 ID = '頭' > Linuxhint ウェブサイト h2 >
体 > 中心 >
< 脚本 >
資料。 getElementById ( '頭' ) . インナーHTML = 「JavaScript コンテンツ」 ;
脚本 >
上記のコードは、前のコードと同じですが、コード ブロックの配置が変更されています。それはそのようなものです」 」要素は、JavaScript コードでアクセスされる前に指定されます。
出力
ご覧のとおり、発生したエラーは解決され、「 インナーHTML 」プロパティが表示されます。
例 2: Uncaught TypeError の発生: Id の不正なアクセスにより getElementById() で null のプロパティを設定できない
上記のエラーは、ID に誤ってアクセスすることによっても発生する可能性があります。
以下の例を見てみましょう。
< マーキー ID = '為に' > ジャワ 大テント >< スクリプトの種類 = 「テキスト/ジャバスクリプト」 >
資料。 getElementById ( '＃為に' ) . 内部テキスト = '脚本' ;
脚本 >
上記のコード スニペットでは、次のようになります。
- 「を含める <マーキー> 」と述べられている要素「 ID 」とテキスト値。
- コードの JS 部分で、「 getElementById() ' 方法。
- 「 ID 特定の要素にアクセスする方法を考えると、ここでの形式は正しくありません。
- ここで、「 内部テキスト 」プロパティは、指定されたテキスト値を表示します。
出力
この出力では、ID 形式が正しくないため、適用されたプロパティが要素に影響を与えなかったことを確認できます。
解決
この特定のシナリオで言及されたエラーは、要素にアクセスする際に id を正しく指定することで解決できます。
< マーキー ID = '為に' > ジャワ 大テント >< スクリプトの種類 = 「テキスト/ジャバスクリプト」 >
資料。 getElementById ( '為に' ) . 内部テキスト = '脚本' ;
脚本 >
上記のコードに示されているように、以下の手順を実装します。
- 「」を含めます <マーキー> ” 指定された “ を持つ要素 ID 」。
- JavaScript コード スニペットで、前の手順で要素の「 ID 」を介して正しく「 getElementById() ' 方法。
- 最後に、「 内部テキスト 」 プロパティを指定して、指定されたテキスト コンテンツを表示します。この場合、テキスト コンテンツは更新されます。
出力
上記の出力では、更新されたテキスト コンテンツが表示されていることが視覚化できます。
結論
「 キャッチされていない TypeError: getElementById() で null のプロパティを設定できません JavaScript の ” は、アクセスする前に要素を指定するか、正しい形式で id を指定することで解決できます。その後、対応する機能を両方のケースで実行できます。このブログでは、Uncaught TypeError: Cannot set properties of null at getElementById() in JavaScript の解決について説明しました。