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’)」が発生した場合の原因と解決方法を記述してます。複数の理由を記述してます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法
5. その他

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

エラー内容

以下のコードを実行時に発生。
※その他のパターンは、後述してます。

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

Optional chainingを使用する

その他

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