addEventListenerが聞きません。

閲覧いただき、ありがとうございます！
現在、Udemyのレッスンで、モーダルを作っているのですが、
下記のコードでaddEventListenerが聞かず、
IDのmodalのコンテンツに classのis-showがつきません・・・。
それに、クリックしてもエラーが何も出ない（コンソールログも出ない）ので
クリックイベント自体聞いていないような気がします。
以前はうまくいったので、理由がわからずお聞きしました。

お手数ですが、教えていただけませんでしょうか＞＜
よろしくお願い致します。

HTML
1
2 <div id="modal" class="modal">
3        <div id="modalInner" class="modalInner">
4            <img src="./img/img_01.jpg" alt="画像">
5        </div>
6        <p id="modal_close" class="modal_close">
7            <i class="fas fa-times"></i>
8        </p>
9        <div id="modal_bg" class="modal_bg"></div>
10    </div>
11    <p id="modal_open" class="modal_open">画像をみる</p>
12
13<script href="js/modal.js"></script>

JavaScript
1const modal = document.getElementById('modal');
2const modalInner = document.getElementById('modalInner');
3const close = document.getElementById('modal_close');
4const bg = document.getElementById('modal_bg');
5const show = document.getElementById('modal_open');
6
7show.addEventListener('click', () => {
8modal.classList.add('.is-show');
9});

#補足になります
サーバーをレンタルしていないので、アップすることができないのですが
全体のファイルのコードになります＞＜（実際はSCSSで書いていますが、ここに載せるとややこしいので、コンパイル後のCSSを載せております）

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>modal_02</title>
7    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
8    <link rel="stylesheet" href="./css/style.css">
9    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
10</head>
11<body>
12    
13    <div id="modal" class="modal">
14        <div id="modalInner" class="modalInner">
15            <img src="./img/img_01.jpg" alt="画像">
16        </div>
17        <p id="modal_close" class="modal_close">
18            <i class="fas fa-times"></i>
19        </p>
20        <div id="modal_bg" class="modal_bg"></div>
21    </div>
22
23    <p id="modal_open" class="modal_open">画像をみる</p>
24
25    
26    <script href="js/modal.js"></script>
27</body>
28</html>

CSS
1* {
2  margin: 0;
3  padding: 0;
4  -webkit-box-sizing: border-box;
5          box-sizing: border-box;
6}
7
8.modal {
9  width: 100%;
10  height: 100%;
11  position: fixed;
12  visibility: hidden;
13  opacity: 0;
14}
15
16.modal.is-show {
17  visibility: visible;
18  opacity: 1;
19}
20
21.modal .modalInner {
22  max-width: 700px;
23  width: 100%;
24  margin: 0 auto;
25  background: #fff;
26  padding: 20px;
27  position: absolute;
28  top: 50%;
29  left: 50%;
30  z-index: 2;
31  -webkit-transform: translate(-50%, -50%);
32          transform: translate(-50%, -50%);
33}
34
35.modal .modalInner img {
36  width: 50%;
37  margin: 0 auto;
38  display: block;
39}
40
41.modal .modal_close {
42  position: absolute;
43  right: 60px;
44  top: 120px;
45  z-index: 3;
46}
47
48.modal .modal_bg {
49  width: 100%;
50  height: 100%;
51  position: absolute;
52  background: rgba(0, 0, 0, 0.8);
53  top: 0;
54  left: 0;
55  z-index: 1;
56}
57
58.modal_open {
59  width: 270px;
60  padding: 30px;
61  text-align: center;
62  background: #000;
63  color: #fff;
64  margin: 0 auto;
65  border-radius: 50px;
66}
67/*# sourceMappingURL=style.css.map */

JS
1'use strict';
2
3
4const modal = document.getElementById('modal');
5const modalInner = document.getElementById('modalInner');
6const close = document.getElementById('modal_close');
7const bg = document.getElementById('modal_bg');
8const show = document.getElementById('modal_open');
9
10
11show.addEventListener('click', () => {
12modal.classList.add('is-show');
13});
14
15

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

回答4件

IDのmodalのコンテンツに classのis-showがつきません・・・。

classList.add('.is-show')と書いているので、そのとおりに.is-showというクラスが付与されるようです。

投稿2020/08/12 07:22

maisumakun

総合スコア146018

kahosayshello

2020/08/12 07:24

閲覧ありがとうございます！それに先ほど気づき、.を削除したのですが、まだclassが付与されませんでした；；

maisumakun

2020/08/12 07:31

「本当にクラスが適用されていない」のか「クラスは適用されているけどCSSが効かない」のかを確認してみてください。

kahosayshello

2020/08/12 07:37

<div id="modal" class="modal"> 定数showである #modal_open をクリックすると本来、is-showが上記のコードのクラスに追加されるはずですが、クリックして検証ツールで確認しても追加されていないので、JSが聞いてないみたいです・・・＞＜

maisumakun

2020/08/12 07:39

modal-openより上に透明なものがかぶさっていて、「クリックできていない」ということはないですか？

kahosayshello

2020/08/12 07:59

pタグをbutton要素に変えてみたり、p.modal-openにcursor:pointer;を記述したところボタンとしてちゃんと認識した（button要素の場合、クリックができた）ので、重なっていることはなさそうかもしれません＞＜

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

自己解決

自己解決いたしました！
単純なる凡ミスでHTMLの方のscriptタグの読み込みを<script src="">ではなく、<script href="">とミスで書いていたからでした・・・！
みなさまありがとうございました＞＜

投稿2020/08/14 08:29

kahosayshello

総合スコア4

普通に動作していると思います
ただし

modal.classList.add('.is-show');

modal.classList.add('is-show');

の方が良いと思います

投稿2020/08/12 07:21

yambejp

総合スコア116734

kahosayshello

2020/08/12 07:27

みていただきありがとうございます！先ほど、.がいらないことに気づき削除したのですが、まだクラスがaddされず、動作しません；； cssの方で、 .modal { width: 100%; height: 100%; position: fixed; visibility: hidden; opacity: 0; } .modal.is-show { visibility: visible; opacity: 1; } その他の記述も続きます。を書いているので、中身が表示されるはずなのですが出てこないのです・・・＞＜

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

クリックイベント自体聞いていないような気がします。

show.addEventListener('click', () => {
modal.classList.add('.is-show');
});

の前の時点でshowのエレメントが存在しているか確認してみてください。

投稿2020/08/12 07:20

kmtr

総合スコア213

kahosayshello

2020/08/12 07:29

閲覧ありがとうございます！ VSCODEで　const show : HTML Element と帰ってくるので存在はしているのだと思います＞＜

kmtr

2020/08/12 07:36

実際の全体のファイルを載せてもらうことは難しいでしょうか？

kahosayshello

2020/08/12 07:46

サーバーをレンタルしておらず、アップすることができないのですが、補足ですべてのファイルを載せさせていただきました＞＜すみません・・・！

kmtr

2020/08/12 08:19

https://codepen.io/bearkm/pen/OJNyrdO 試しにそのままコードを移してみたのですが、クリックで開けました

kahosayshello

2020/08/12 08:51

コードペンという手があったのですね！動いていますね。。。ありがとうございます＞＜何故ローカル環境で動かないのかよくわかりません・・・

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

addEventListenerが聞きません。

関連した質問