addEventListner loadが一行しか実行されない

どうしても解決方法がわからず困っております。
恐れ入りますが知恵を貸して下さい。

下記の通りHTMLファイルを２つ用意し、
同一のcssとjsを読み込ませています。

この状態でaddEventListnerのloadを実行すると、
box1に対しての命令のみ実行され、box2は正常に動作しません。
※順番を逆にした場合はbox2のみが実行

また、console.logで確認するとbox2はnullになっているようで、
Uncaught TypeError: Cannot read property 'classList' of nullのエラーが表示されます。

box2も実行する方法をご教授頂けると幸いです。

html1

html
1<bod
2  <div id="box1">
3  </div>
4</body>

html2

html
1<body>
2  <div id="box2">
3  </div>
4</body>

css

css
1#box1,
2#box2 {
3  width: 300px;
4  height: 300px;
5  background-color: blue;
6  opacity: 0;
7  transition: .5s;
8}
9
10#box2 {
11  background-color: green;
12}
13
14#box1.show,
15#box2.show {
16  opacity: 1;
17}

Javascript

javascript
1const box1 = document.getElementById('box1');
2const box2 = document.getElementById('box2');
3window.addEventListener('load', () => {
4  box1.classList.add('show');
5  box2.classList.add('show');
6})

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

回答1件

ベストアンサー

console.logで確認するとbox2はnullになっているようで、

そのとおりです。なので、「存在しなければ処理を飛ばす」ようにしておく必要があります。

javascript
1const box1 = document.getElementById('box1');
2const box2 = document.getElementById('box2');
3window.addEventListener('load', () => {
4  if(box1) box1.classList.add('show');
5  if(box2) box2.classList.add('show');
6})