◀ 5.

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

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

このエラーは、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"の要素を取得し、クリックイベントを追加しています。このように、ページの読み込み完了を待つことで、要素が存在しない場合にエラーが発生することを防ぐことができます。

子ページ
子ページはありません
同階層のページ
  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')

人気ページ

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

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。