複数モーダルが出せない

前提・実現したいこと

複数モーダルが出せない

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLDivElement.<anonymous> (index.js:51)
(anonymous) @ index.js:51

該当のソースコード

js
1document.querySelectorAll('.modal__inner-list-img').forEach(modalTarget => {
2  modalTarget.addEventListener('click', e => {
3    // クリックした要素から、data-targetを取得
4    // ここのforEachの部分でターゲット取得出来てないから、後のclassList がnullで返ってきている？
5    //ここでクリックした値のdata-target="popup1"のpopup1を取得している
6    const targetId = e.target.dataset.target;
7    // 対象のモーダルにactiveクラスを付与
8    //取得したpopup1をidにしている部分にクラスを追加して表示させる
9**    document.getElementById(targetId).classList.add('is-show'); //この部分エラー**
10  });
11});
12
13// モーダル本体には、別でイベントを付与したほうがいい
14document.querySelectorAll('.popup').forEach(popupTarget => {
15  popupTarget.addEventListener('click', e => {
16    e.target.classList.remove('is-show');
17  });
18});

html
1
2        <section class="modal">
3          <ul class="modal__inner">
4            <li class="modal__inner-list" data-target="popup1">
5              <div class="modal__inner-list-img">
6                <img src="./assets/images/pages/index/01.jpg" alt="">
7              </div>
8              <div class="modal__inner-list-text">
9                <img src="./assets/images/pages/index/01_text.png" alt="">
10              </div>
11            </li>
12            <li class="modal__inner-list" data-target="popup2">
13              <div class="modal__inner-list-img">
14                <img src="./assets/images/pages/index/02.jpg" alt="">
15              </div>
16        </section>
17        <section>
18          <div id="popup1" class="popup">
19            <div class="popup__inner">
20              <div id="popup__close" class="popup__close"><i class="fas fa-times"></i></div>
21              <img src="./assets/images/pages/index/01.jpg">
22            </div>
23            <div id="popup__background" class="popup__background"></div>
24          </div>
25          <div id="popup2" class="popup">
26            <div class="popup__inner">
27              <div id="popup__close" class="popup__close"><i class="fas fa-times"></i></div>
28              <img src="./assets/images/pages/index/02.jpg">
29            </div>
30            <div id="popup__background" class="popup__background"></div>
31          </div>
32        </section>

css
1/* モーダル */
2.popup {
3  position: fixed;
4  left: 0;
5  top: 0;
6  width: 100%;
7  height: 100%;
8  opacity: 0;
9  visibility: hidden;
10  transition: 0.6s;
11}
12.is-show {
13  opacity: 1;
14  visibility: visible;
15}
16.popup__inner {
17  position: absolute;
18  left: 50%;
19  top: 50%;
20  transform: translate(-50%, -50%);
21  width: 80%;
22  max-width: 600px;
23  padding: 50px;
24  background-color: #fff;
25  z-index: 2;
26}
27.popup img {
28  width: 100%;
29}
30.popup__close {
31  position: absolute;
32  right: 0;
33  top: 0;
34  width: 50px;
35  height: 50px;
36  line-height: 50px;
37  text-align: center;
38  cursor: pointer;
39}
40i {
41  font-size: 20px;
42  color: #333;
43}
44.popup__background {
45  position: absolute;
46  left: 0;
47  top: 0;
48  width: 100%;
49  height: 100%;
50  background-color: rgba(0, 0, 0, 0.8);
51  z-index: 1;
52  cursor: pointer;
53}

試したこと

下記内容を参考にモーダル作成を試みました。
https://teratail.com/questions/231892

const targetId = e.target.dataset.target;　ｊｓのこの部分が定義出来ていない？ようなのですが、原因がわからず困っています、、

初心者質問で申し訳ないですが、どなたかご教示いただければ幸いです。

退会済みユーザー

2021/10/09 03:46

> 複数モーダルが出せない表題だけしか読んでないので何か誤解しているかもしれませんが、そもそもの話として「モーダル」というのは複数出すものではないと思うのですが・・・

kokit

2021/10/09 04:50

コメントいただき有難うございます。そもそもの認識が間違っているかもしれないので、「モーダル」について改めて調べます、、

退会済みユーザー

2021/10/09 05:23

モーダルでググってみてください。以下のような記事が見つかると思います。モーダルダイアログ【modal dialog】モーダルウィンドウ / modal window https://e-words.jp/w/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0.html "モーダルダイアログとは、コンピュータの操作画面に表示されるダイアログボックスのうち、画面上の他の領域や要素の操作をできないようにするタイプのもの。利用者の操作によりボックスが閉じるまで他の操作を受け付けなくなる。" ・・・ということで、モーダルウィンドウ・ダイアログを複数出すというのは少なくとも上の目的には合ってないと思います。

kokit

2021/10/09 05:36

有難うございます！お調べ頂いたモーダルの認識はあってましたが、お伝えした内容が言葉足らずでした、、それぞれの写真を押したらそれぞれのモーダルが表示されるということを実装したかったので、何とか頑張りたいと思います。