JavaScript

Uncaught TypeError: Cannot (read set) property of nullの原因と対処法

本記事では、JavaScriptのエラーの一つUncaught TypeError: Cannot (read set) property ‘’ of nullが出た際の原因と対処法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

エラーの原因と対処法

Cannot (read set) property ‘x’ of undefined、日本語に訳すと「nullのプロパティを読み取ることができません」という意味になります。このエラーはCannot read property ‘’ of undefinedと非常に良く似ており、nullの値を保持しているプロパティに対して何かしらの処理を実行させるとエラーが出力されます。

const elem = document.getElementById("sample-text1"); // ← null(存在しないid)
elem.textContent = "テスト"; // ← Uncaught TypeError: Cannot set properties of null (setting 'textContent')

上記のサンプルコードでは、取得してきた要素に対してテストの文字列を追加する処理ですが、取得してきた要素がそもそも存在しません。そのため、取得してきた要素の情報を代入している変数elemにはnullが代入され、その値を使ってテキストを追加しようとしている処理でエラーが発生します。

このようなエラーを出力させないようにするには、存在しないDOM要素を取得しないようにする、または下記のような条件分岐を使い取得してきた要素の値がnull以外の時(正しく取得している)にだけ、処理を実行させるようにします。

const elem = document.getElementById("sample-text1");
if (elem) {
  elem.textContent = "テスト";
}
【JavaScript】falsyとtruthyについて本記事では、JavaScriptのfalsyとtruthyについて解説しています。...

Uncaught TypeErrorの関連記事

Uncaught TypeError: "" is not a functionの原因と対処法本記事では、JavaScriptのエラーの一つUncaught TypeError: "" is not a functionが出た際の原因と対処法について解説しています。...
Uncaught TypeError: Cannot read property ‘’ of undefinedの原因と対処法本記事では、JavaScriptのエラーの一つUncaught TypeError: Cannot read property ‘’ of undefinedが出た際の原因と対処法について解説しています。...

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村