javascript エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」の解決方法
- 作成日 2022.02.22
- 更新日 2022.10.29
- javascript
- javascript

javascriptで、エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」が発生した場合の原因と解決方法を記述してます。複数の理由を記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 107.0.5304.63
エラー内容
以下のコードを実行時に発生。
※その他のパターンは、後述してます。
<div id="main">
<input id="btn" type="button" value="ボタン" />
</div>
<script>
const obj = document.querySelector('#hoge')
console.log(obj.value)
</script>
エラーメッセージ
Uncaught TypeError: Cannot read properties of null (reading 'value')
画像

firefox(バージョン105)では、下記のエラーとなります。
Uncaught TypeError: obj is null
画像

原因
存在しない要素を指定しているため。
解決方法
存在する要素を指定する
<div id="main">
<input id="btn" type="button" value="ボタン" />
</div>
<script>
const obj = document.querySelector('#btn')
console.log(obj.value)
</script>
実行結果

もしくは、要素の存在チェックを行ってから、処理を記述する。
<div id="main">
<input id="btn" type="button" value="ボタン" />
</div>
<script>
const obj = document.querySelector('#hoge')
if ( obj !== null ) console.log(obj.value)
</script>
ES2020の機能である「Optional chaining」を使って「undefined」とする方法もあります。
<div id="main">
<input id="btn" type="button" value="ボタン" />
</div>
<script>
const obj1 = document.querySelector('#hoge')
console.log(obj1?.value) // undefined
const obj2 = document.querySelector('#btn')
console.log(obj2?.value) // ボタン
</script>
その他
html要素より先にjsを記述
以下のように、「html要素」より先に「js」を記述しても発生します。これは、先に「js」が解釈されてるため、「html要素」である「ボタン」がまだ存在しない状態となり、エラーとなってしまいます。
<script>
const obj = document.querySelector('#btn')
console.log(obj.value)
// Uncaught TypeError: Cannot read properties of null (reading 'value')
</script>
<input id="btn" type="button" value="ボタン" />
html要素より後に「js」を記述するか、「window.onload」イベントを使用します。
<script>
window.onload = function(){
const obj = document.querySelector('#btn')
console.log(obj.value) // ボタン
}
</script>
<input id="btn" type="button" value="ボタン" />
null
また、「null」に対して「substr」を実行した以下のコードでも同様のエラーが発生します。
let x = null;
x.substr(0, 2);
実行結果
Uncaught TypeError: Cannot read properties of null (reading 'substr')
「nullチェック」をすることで、エラーを回避することができます。
let x = null;
if(x !== null){
x.substr(0, 2);
}
「length」でも、「null」に使用すると発生します。
const str = "abc";
str.match(/[0-9]/gi).length
// Uncaught TypeError: Cannot read properties of null (reading 'length')
こちらも同様に「null」チェックをすることで回避できます。
const str = "abc";
let result;
result = str.match(/[0-9]/gi)
if( result !== null ) { console.log( result.length ) }
「includes」でも、同様です。「null」チェックをすれば回避することできます。
const str = null;
str.includes('aaa');
オブジェクトを「null」に指定
代入したオブジェクトを「null」にしてしまっても、同じエラーとなります。
let user = {
name: "taro",
age: 10,
fn() {
console.log( user.name );
}
};
let user2 = user;
user = null;
user2.fn(); // Uncaught TypeError: Cannot read properties of null (reading 'name')
こちらは、使用する変数を「this.name」に変更にすることで改善できます。
let user = {
name: "taro",
age: 10,
fn() {
console.log( this.name );
}
};
let user2 = user;
user = null;
user2.fn(); // taro
-
前の記事
MySQL 時間を加算する 2022.02.22
-
次の記事
nextcloud カンバンボード「Deck」を追加する 2022.02.22
コメントを書く