【JavaScript】ポップアップを表示させてる時にスクロール禁止したい

いつもお世話になっております。
また一つつまづいたので、質問させてください。

実現したいこと

インフォーメーションを設定しており、クリックした内容をポップアップで表示させています。
その時に、背後をスクロール禁止にしたいです。
class="info-ttl"をクリックしたときに、class="info-content"にクラス名activeが追加で付くように設定しています。

該当のソースコード

html
1<body>
2<dl>
3 <dt>2022.07.14</dt>
4 <dd>
5  <span class="info-ttl">インフォメーションのタイトル</span>
6  <div class="info-content">ポップアップで表示させてる内容</div>
7 </dd>
8 <dt>2022.07.14</dt>
9 <dd>
10  <span class="info-ttl">インフォメーションのタイトル</span>
11  <div class="info-content">ポップアップで表示させてる内容</div>
12 </dd>
13 <dt>2022.07.14</dt>
14 <dd>
15  <span class="info-ttl">インフォメーションのタイトル</span>
16  <div class="info-content">ポップアップで表示させてる内容</div>
17 </dd>
18</dl>
19</body>

試したこと

javascript
1const infoTtl = document.querySelectorAll('.info-ttl');
2const scrollProhabited = document.querySelectorAll('.info-content');
3const scrollProhabitedBody = document.getElementsByTagName('body');
4
5infoTtl.forEach(function (info) {
6 info.addEventListener('click', function () {
7  scrollProhabited.forEach(function (element) {
8   if (element.classList.contains('active')) {
9    scrollProhabitedBody.classList.add('modal-open');
10   } else {
11    scrollProhabitedBody.classList.remove('modal-open');
12   }
13  });
14 });
15});
16

出てるエラー

クリック時にremove部分でエラーが出ます。
Cannot read properties of undefined (reading 'remove')

補足

console.logで確認したところ、そもそもクリック時にelement.classList.contains('active')がtrueになってないようです。

よろしくお願いいたします。

追記

ポップアップの設定は以下のように行っています。

javascript
1/*--Informationのポップアップ--*/
2const popupTtl = document.querySelectorAll('.tinfo-ttl');
3const popupBox = document.querySelectorAll('.info-content);
4const popupCloseBtn = document.querySelectorAll(
5 '.top-info-content-popup-close-btn'
6);
7const popupContentBg = document.querySelectorAll(
8 '.top-info-content-popup-inner-box'
9);
10
11window.addEventListener('DOMContentLoaded', function () {
12 for (let i = 0; i < popupTtl.length; i++) {
13  popupTtl[i].addEventListener('click', function (e) {
14   e.preventDefault();
15   let dataPopupTtl = popupTtl[i].getAttribute('data-popup-ttl');
16   for (let j = 0; j < popupBox.length; j++) {
17    if (popupBox[j].getAttribute('data-popup-cont') === dataPopupTtl) {
18     popupBox[j].classList.add('active');
19    }
20   }
21  });
22  popupContentBg[i].addEventListener('click', function () {
23   popupBox[i].classList.add('active2');
24   setTimeout(function () {
25    popupBox[i].classList.remove('active');
26    popupBox[i].classList.remove('active2');
27   }, 300);
28  });
29  popupCloseBtn[i].addEventListener('click', function () {
30   popupBox[i].classList.add('active2');
31   setTimeout(function () {
32    popupBox[i].classList.remove('active');
33    popupBox[i].classList.remove('active2');
34   }, 300);
35  });
36 }
37});
38
39//Informationポップアップを開いてる時にスクロール禁止
40const scrollProhabitedBody = document.getElementsByTagName('body');
41
42popupTtl.forEach(function (info) {
43 info.addEventListener('click', function () {
44  popupBox.forEach(function (element) {
45   if (element.classList.contains('active')) {
46    scrollProhabitedBody.classList.add('modal-open');
47   } else {
48    scrollProhabitedBody.classList.remove('modal-open');
49   }
50  });
51 });
52});
53

Matsumon0104

2022/07/14 04:06

>該当箇所をクリックしたときに、classにactiveが付くように設定しています。クリックしたときに「active」を付与している部分のソースを掲載していただくと、有用な回答が得られるかと思います。

chibimame

2022/07/14 04:16

>Matsumon0104 ありがとうございます！該当ソースコード内のclass="info-ttl"をクリックしたときに、class="info-content"にクラス名activeが追加で付くように設定しています。修正しましたので、ご確認いただけますと幸いです。

Matsumon0104

2022/07/14 04:28

ご掲載いただいているソース部分には、「add」を利用してクラス名に「active」を追加してる部分は無いかと思うのですが、別の部分で実装していますか？それとも、何かjsのフレームワークやライブラリを利用していますか？

chibimame

2022/07/14 04:33

>Matsumon0104 activeをつける動作については、別の部分でJSで実装済みです！フレームワークなどは利用せず、Pure JSで実装しています。

Matsumon0104

2022/07/14 04:39

プログラムの全景を見てみないと何とも言えませんが、「activeをつける動作」が掲載いただいたクリックイベントの前に発生していないのかと思います。同じ「.info-ttl」のクリックイベントを一つにまとめることはできませんか？

chibimame

2022/07/14 05:21

>Matsumon0104 ありがとうございます！追記に、ポップアップに関するJSを追加しました。クリックイベントを一つにまとめるというのは、 popupTtl[i].addEventListener('click', function (e) の中身に、bodyに対してclassを付与するといった記述を行うという意味でしょうか？チグハグなこと言ってたらすみません🙇‍♀️

Matsumon0104

2022/07/14 05:30

いえ。「popupTtl[i].addEventListener('click',」で設定しているイベント処理と「info.addEventListener('click',」で設定しているイベント処理をうまく一つのクリックイベント指定(addEventListener)で設定できないかなと。基本的に、1つのイベントに対して、同じイベント(今回はclick)が登録された場合、登録された順でイベント処理が呼ばれます。しかし、今回のパターンでは「window.addEventListener('DOMContentLoaded'」によって、クリックイベントの処理順序がちぐはぐになってしまいうまく動かないのかなと思いました。イベント処理順序が想定どおりかどうかを確認するために、各クリックイベント内に「console.log」等を記載して確認してみてはいかがでしょうか。

chibimame

2022/07/14 05:41

>Matsumon0104 ありがとうございます！ console.logで確認して、原因がわかりました。結論から言うと、bodyを取ってきているgetElementsByTagNameが複数取ってくることになるので、後で記述してあるscrollProhabitedBodyがどのscrollProhabitedBodyなのかがわからずにエラーが起きていたようです。 scrollProhabitedBody[0]と記述すると上手くいきました。

Matsumon0104

2022/07/14 06:08

よかったです。全然違うところを勘ぐっておりました。「console.log」を入れて、処理の状態を見てみたりするのはやることが結構あるので、覚えておいて損はないと思いおますよ。解決内容を回答に記載して、自己解決で質問を閉じていただけますか。

chibimame

2022/07/14 06:35

console.logでの処理確認、肝に銘じます！ありがとうございました🙇‍♀️

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

回答2件

自己解決

javascript
1window.addEventListener('DOMContentLoaded', function () {
2 for (let i = 0; i < popupTtl.length; i++) {
3  popupTtl[i].addEventListener('click', function (e) {
4   e.preventDefault();
5   let dataPopupTtl = popupTtl[i].getAttribute('data-popup-ttl');
6   for (let j = 0; j < popupBox.length; j++) {
7    if (popupBox[j].getAttribute('data-popup-cont') === dataPopupTtl) {
8     popupBox[j].classList.add('active');
9     scrollProhabitedBody.classList.add('modal-open');
10    }
11   }
12  });
13  popupContentBg[i].addEventListener('click', function () {
14   popupBox[i].classList.add('active2');
15   setTimeout(function () {
16    popupBox[i].classList.remove('active');
17    popupBox[i].classList.remove('active2');
18    scrollProhabitedBody.classList.remove('modal-open');
19   }, 300);
20  });
21  popupCloseBtn[i].addEventListener('click', function () {
22   popupBox[i].classList.add('active2');
23   setTimeout(function () {
24    popupBox[i].classList.remove('active');
25    popupBox[i].classList.remove('active2');
26    scrollProhabitedBody.classList.remove('modal-open');
27   }, 300);
28  });
29 }
30});

投稿2022/07/14 06:34

chibimame

総合スコア28

javascript
1<style>
2div{
3background-Color:gray;
4height:40%;
5}
6div:nth-child(odd){
7background-Color:yellow;
8}
9</style>
10<script>
11const noscroll=(e)=>e.preventDefault();
12const scrollEvents=["touchmove","wheel","mousewheel","scroll"];
13document.addEventListener('click', e=>{
14  const t=e.target;
15  if(t.closest('.btn')){
16    modal.showModal();
17    scrollEvents.forEach(e=>document.addEventListener(e,noscroll,{passive:false}));
18  }
19  if(t.closest('#modal')){
20    modal.close();
21    scrollEvents.forEach(e=>document.removeEventListener(e,noscroll,{passive:false}));
22  }
23});
24</script>
25<div><input type="button" class="btn" value="modal open"></div>
26<div><input type="button" class="btn" value="modal open"></div>
27<div><input type="button" class="btn" value="modal open"></div>
28<div><input type="button" class="btn" value="modal open"></div>
29<div><input type="button" class="btn" value="modal open"></div>
30<dialog id="modal">test</div>