◀ 5.

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

編集

このエラーは、JavaScriptでDOMの要素を取得しようとしたところ、取得できなかった場合に発生するエラーです。具体的には、addEventListener()メソッドを呼び出した要素がnullであった場合にこのエラーが発生します。

このエラーが発生する原因は、次のようなものが考えられます。

  1. 要素のIDが間違っている
  2. ページがまだ完全に読み込まれていないため、要素が存在しない
  3. 要素が動的に生成され、addEventListener()が呼び出される前に削除された

このエラーを解決するには、次のような対策を取ることができます。

  1. 要素のIDが間違っていないことを確認する
  2. ページの読み込みが完了してから要素を取得するようにする
    • 例えば、window.onloadイベントを使用して、ページの読み込み完了を待つことができます。
  3. 要素が動的に生成された場合は、要素の生成後にaddEventListener()を呼び出すようにする

以下は、ページの読み込み完了後に要素を取得する方法の例です。

javascript

window.onload = function() {
  const element = document.getElementById('target');
  element.addEventListener('click', function() {
    // クリックされたときの処理
  });
};

上記の例では、ページの読み込みが完了してから、IDが"target"の要素を取得し、クリックイベントを追加しています。このように、ページの読み込み完了を待つことで、要素が存在しない場合にエラーが発生することを防ぐことができます。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. Uncaught TypeError: Illegal invocation
  2. Form submission canceled because the form is not connected
  3. Uncaught TypeError: location.href is not a function
  4. Access to XMLHttpRequest at 'url1' from origin 'url2' has been blocked by CORS policy
  5. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
2023-02-28 16:35:22 guest 2898

人気ページ

最近更新/作成されたページ