【js】addEventListenerのエラーが別のページで発生する原因

下記のコードが使われているページでは正常に作動しており、エラーが出ることはありません。

しかし、他のページに遷移すると常に下記の様なエラーが出ます。

Uncaught TypeError: Cannot read property 'addEventListener' of null

このページにtrainTab1の変数が存在しないということは理解できたのですが、trainTab1をクリックしていないのに、上記のエラー常にが出る原因が分かりませんでした。

js
1const trainTab1 = document.getElementById("trainTab1"),
2	  trainTab2 = document.getElementById("trainTab2"),
3	  train1 = document.getElementById("train1"),
4	  train2 = document.getElementById("train2"),
5
6trainTab1.addEventListener("click" , function() {
7	if(trainTab1.className !== trainActive1) {
8		trainTab1.classList.add(trainActive1);
9		trainTab2.classList.remove(trainActive1);
10		train1.classList.add(trainActive2);
11		train2.classList.remove(trainActive2);
12	}
13});
14trainTab2.addEventListener("click" , function() {
15	if(trainTab2.className !== trainActive1) {
16		trainTab1.classList.remove(trainActive1);
17		trainTab2.classList.add(trainActive1);
18		train1.classList.remove(trainActive2);
19		train2.classList.add(trainActive2);
20	}
21});

お知恵を拝借出来たら、幸いです。
宜しくお願い致します。

maisumakun

2020/12/24 04:41

他にページへ適用されているJavaScriptはありますか？

Lhankor_Mhy

2020/12/24 04:56

「他のページ」とは、まったく別のサイトということですか？　それとも、同じサイトの別のページという意味ですか？

ntttt

2020/12/24 07:15

maisumakunさん質問内容を編集いたしました。 trainTab1とtrainTab2がクリックされた、コンテンツの内容が変更されるというjsを適用しております。

ntttt

2020/12/24 07:16

Lhankor_Mhyさん同じサイトの別のページという意味でございます。

行動規範の内容に同意します

回答1件

こんばんは。

おそらく、DOMの準備ができていないことによるエラーだと思います。
JavaScript - 【JS】addEventListenerが機能しない理由についてご教示ください｜teratail

クリックしていなくてもエラーになる原因は、以下の通りです。

js
1trainTab1.addEventListener("click" , function() {
2//        ↑ここでエラー
3//↑ここまではクリックしなくても実行される
4//↓ここからはクリックした後に実行される
5    if(trainTab1.className !== trainActive1) {
6        trainTab1.classList.add(trainActive1);
7        trainTab2.classList.remove(trainActive1);
8        train1.classList.add(trainActive2);
9        train2.classList.remove(trainActive2);
10    }
11//↑ここまではクリックした後に実行される
12//↓ここからはクリックしなくても実行される
13});