onClickが動作しない

html
1<li class="sub-contents-li">
2    <div class="sub-contents-div">
3        <a href="#header">
4            <img id="modalPhone" src="./images/bell.png" alt="" class="sp" onClick=addOpenClass(event)>
5            <p class="sp p12">電話をかける</p>
6        </a>
7    </div>
8</li>

本当は<li class="sub-contents-li"onClick=addOpenClass(event)>としたいのですが、動作しません。

コードを添え付け致します、どなたかご指導いただけると幸いです。（テスト用なので、すべてHTML内にCSS,JSは組み込んでいます）
スマホサイト用途なので、PCモードでは動作しません。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <!-- sub-contents -->
11
12    <section class="sub-contents sp">
13        <style>
14            *{
15                margin: 0;
16                padding: 0;
17                box-sizing: border-box;
18            }
19            #mask {
20                display: none;
21                transition: all .5s;
22            }
23            
24            #mask.open {
25                display: block;
26                position: absolute;
27                top: 0;
28                left: 0;
29                width: 100vw;
30                height: 100vh;
31                background: #000;
32                opacity: 0.8;
33                z-index: 2;
34                cursor: pointer;
35            }
36            
37            #mask-kaijo p {
38                color: red;
39                font-weight: bold;
40                cursor: pointer;
41            }
42            
43            #mask-kaijo {
44                position: absolute;
45                top: -43px;
46                right: 13px;
47            }
48            
49            nav.Hamburger {
50                position: fixed;
51                top: 20vh;
52                bottom: 0;
53                background: #fff;
54                transition: all 0.5s;
55                z-index: 3;
56                opacity: 0;
57                left: -100vw;
58                width: 100vw;
59            }
60            
61            nav.Hamburger ul {
62                position: relative;
63            }
64        </style>
65        <div class="sub-contentMidasi">
66            <p class="midasi"><span style="color: #555;font-family: 'Rubik', sans-serif;">■</span>ナビゲーションパネル</p>
67            <div class="desp">
68                <ul class="sub-contents-ul sp">
69                    <li class="sub-contents-li">
70                        <div class="sub-contents-div">
71                            <a href="#header">
72                                <img id="modalPhone" src="./images/bell.png" alt="" class="sp" onClick=addOpenClass(event)>
73                                <p class="sp p12">電話をかける</p>
74                            </a>
75                        </div>
76                    </li>
77                </ul>
78
79            </div>
80        </div>
81    </section>
82
83    <style>
84        .sub-contents-ul {
85            display: flex;
86        }
87        
88        .sub-contents-li {
89            width: 25%;
90            display: flex;
91            align-items: center;
92        }
93        
94        .sub-contents-div {
95            width: 100%;
96            height: 150px;
97            padding: 8px 12px 12px;
98            box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px, rgb(109, 149, 206) 0px -4px 5px -2px inset;
99        }
100        
101        .sub-contents .sp {
102            display: none;
103        }
104        
105        .sub-contentMidasi {
106            width: 100%;
107            display: flex;
108            flex-direction: column;
109            align-items: center;
110            padding: 6px 0;
111        }
112        
113        .sub-contentMidasi a {
114            width: 100%;
115            text-align: center;
116        }
117        
118        .sub-contentMidasi img {
119            width: 40%;
120            height: auto;
121        }
122        
123        .sub-contentMidasi p.midasi {
124            text-align: center;
125            color: #000000;
126            border-bottom: 1px solid #555;
127        }
128        
129        .sub-contentMidasi .desp {
130            width: 95vw;
131            font-size: 13px;
132            margin: 15px 0 0 0;
133            text-align: center;
134            background: whitesmoke;
135        }
136        
137        @media screen and (max-width: 768px) {
138            .sub-contents.sp {
139                display: flex;
140                margin-top: 10px;
141            }
142        }
143        
144        @media screen and (max-width: 959px) {
145            .sub-contents .sp {
146                display: flex;
147            }
148            .sub-contents-div {
149                display: flex;
150                align-items: center;
151                justify-content: space-between;
152                flex-direction: column;
153                width: 100%;
154                height: auto;
155                box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px, rgb(109, 149, 206) 0px -4px 5px -2px inset;
156            }
157            .sub-contents-div img.sp {
158                width: auto;
159                height: 30px;
160            }
161        }
162    </style>
163
164    <div id="mask"></div>
165    <nav style="padding: 10px;" class="Hamburger">
166        <div id="mask-kaijo" onClick=maskClose()>
167            <p class="p32">×</p>
168        </div>
169        <div style="height: 70vh;overflow: auto;">
170            <ul class="modalPhone" style="display: none;">
171                <li>
172                    <div style="width: 100%;margin: 20px 0;">
173                        <a href="tel:000-000-0000">
174                            <img style="width: 50%;display: block;margin: 0 auto;" src="./images/phone-modal.png" alt="phone">
175                        </a>
176                    </div>
177                    <div class="desp-wrapper">
178                        <p class="p16" style="text-align: center;color:#011e01;">アイコンタッチで発信します</p>
179                    </div>
180                </li>
181                <style>
182                    .modalPhone {
183                        margin-top: 50px;
184                    }
185                </style>
186            </ul>
187        </div>
188
189    </nav>
190
191    <script>
192        const addOpenClass = (e) => {
193            console.log(e.target.id);
194            document.querySelector(".modalPhone").style.display = "none";
195            document.querySelector(`.${e.target.id}`).style.display = "block";
196            const HamburgerElement = document.querySelector('.Hamburger');
197            const maskElement = document.getElementById('mask');
198            const kaijoButton = document.getElementById('mask-kaijo');
199            let res = maskElement.classList.contains('open');
200            const func1 = () => {
201                kaijoButton.style.display = 'none';
202                maskElement.classList.remove('open');
203                HamburgerElement.style.left = '-100vw';
204                HamburgerElement.style.opacity = 0;
205            }
206            const func2 = () => {
207                kaijoButton.style.display = 'block';
208                maskElement.classList.add('open');
209                HamburgerElement.style.left = 0;
210                HamburgerElement.style.opacity = 1;
211            }
212            res ? func1() : func2();
213        }
214        const maskClose = () => {
215            const HamburgerElement = document.querySelector('.Hamburger');
216            const maskElement = document.getElementById('mask');
217            const kaijoButton = document.getElementById('mask-kaijo');
218            kaijoButton.style.display = 'none';
219            maskElement.classList.remove('open');
220            HamburgerElement.style.left = '-100vw';
221            HamburgerElement.style.opacity = 0;
222        }
223    </script>
224    <!-- sub-contents -->
225</body>
226</html>

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

回答3件

ベストアンサー

imgにonClickは提示いただいたソースで動作しました（Chrome）。

本当は<li class="sub-contents-li"onClick=addOpenClass(event)>としたいのですが、動作しません。

e.targetがimgを指していない時に起こるのかと思います。
liを起点にしてidを探す方式でしてみました。

JavaScript
1const imgId = e.currentTarget.querySelector("img").id;
2document.querySelector(".modalPhone").style.display = "none";
3document.querySelector(`.${imgId}`).style.display = "block"

e.target.idの e.target の値をデバッガで確認いただくとどうでしょうか？
li, div, aがe.targetになっており、idが取得できていなかったのではないかと思いました。

Event.currentTargetとEvent.targetの違いについて
https://www.javadrive.jp/javascript/event/index9.html

抜粋
・Event.currentTarget　→ イベントハンドラを登録した要素
・Event.target　→ イベントが発生した要素

その他

個人的にはaddEventListenerでハンドル登録したい派です。
また、onClickにダブルクォーテーションあった方がいいのかと思いました

html
1<img id="modalPhone" src="./images/bell.png" alt="" class="sp" onClick="addOpenClass(event)">

投稿2022/03/02 12:43

編集2022/03/02 12:45

t-ochi

総合スコア48

kikioya

2022/03/02 21:06

Event.currentTargetとEvent.targetの違い知りませんでした💦 リンクまで張って頂きありがとうございます。皆様の貴重な回答感謝します、今回はt-ochiさんをベストアンサーにさせて頂きます。本当にありがとうございました！

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

ひとまず提示コードでPCでも動作することは確認しました（Windows11,Firefox）
画像クリックですよね。

本当は<li class="sub-contents-li"onClick=addOpenClass(event)>としたいのですが、動作しません。

エラーが出ています。
ブラウザのコンソールを確認してください。
Uncaught DOMException: Document.querySelector: '.' is not a valid selector

たぶんイベントが発生するli要素にidが振られてなくemptyとなり、参照できないからというのと、相対的な要素の位置関係も調整しなければならないと思います。

投稿2022/03/02 11:45

m.ts10806

総合スコア80850

kikioya

2022/03/02 21:08

「相対的な要素の位置関係も調整しなければならない」おっしゃる通りでございます。貴重な回答ありがとうございます。

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

js使えるならaddEventListener使ってみてはどうでしょうか？

javascript
1document.querySelector('.sub-contents-li').addEventListener('click', function(e)) {
2  addOpenClass(e);
3}

か

javascript
1document.querySelector('.sub-contents-li').addEventListener('click', function(e)) {
2            console.log(e.target.id);
3            document.querySelector(".modalPhone").style.display = "none";
4            document.querySelector(`.${e.target.id}`).style.display = "block";
5            const HamburgerElement = document.querySelector('.Hamburger');
6            const maskElement = document.getElementById('mask');
7            const kaijoButton = document.getElementById('mask-kaijo');
8            let res = maskElement.classList.contains('open');
9            const func1 = () => {
10                kaijoButton.style.display = 'none';
11                maskElement.classList.remove('open');
12                HamburgerElement.style.left = '-100vw';
13                HamburgerElement.style.opacity = 0;
14            }
15            const func2 = () => {
16                kaijoButton.style.display = 'block';
17                maskElement.classList.add('open');
18                HamburgerElement.style.left = 0;
19                HamburgerElement.style.opacity = 1;
20            }
21            res ? func1() : func2();
22}