javascript エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」の解決方法

javascript エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」の解決方法

javascriptで、エラー「Uncaught TypeError: Cannot read properties of null (reading ‘xxx’)」が発生した場合の原因と解決方法を記述してます。

環境

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

エラー内容

以下のコードを実行時に発生

<div id="main">
  <input id="btn" type="button" value="ボタン" />
</div>

const obj = document.querySelector('#hoge')
console.log(obj.value)

エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'value')

画像

firefox(バージョン97)では、下記のエラーとなります。

Uncaught TypeError: obj is null

画像

原因

存在しない要素を指定しているため。

解決方法

存在する要素を指定する

<div id="main">
  <input id="btn" type="button" value="ボタン" />
</div>

const obj = document.querySelector('#btn')
console.log(obj.value)

実行結果

また、以下のコードでも同様のエラーが発生します。

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