javascript エラー「TypeError: null is not an object (evaluating ‘xxx.value’)」の解決方法

javascript エラー「TypeError: null is not an object (evaluating ‘xxx.value’)」の解決方法

javascriptで、エラー「TypeError: null is not an object (evaluating ‘xxx.value’)」が発生した場合の原因と解決方法を記述してます。存在しない要素を「querySelector」などで取得しようとした際に発生します。

環境

  • OS macOS Monterey
  • ブラウザ safari 15.5

エラー内容

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

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

<script>

const obj = document.querySelector('#foo')

console.log(obj.value)

</script>

エラーメッセージ全文

TypeError: null is not an object (evaluating 'obj.value')

画像

原因

存在しない要素名を「querySelector」で指定しているため。

解決方法

記述されている要素名を指定する。

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

<script>

const obj = document.querySelector('#btn')

console.log(obj.value)

</script>

実行結果