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

環境

  • OS macOS Big Sur
  • ブラウザ safari 15.0

エラー内容

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

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

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

エラーメッセージ全文

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

画像

原因

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

解決方法

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

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

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

実行結果