回答率: 85.47%

質問するログイン新規登録

トップ CSS3に関する質問 onClickが動作しない

編集履歴

回答編集履歴

4

クリックのトリガー要素を変更

2022/03/02 11:53

投稿

スコア289

test CHANGED Viewed

@@ -1,12 +1,12 @@
 js使えるならaddEventListener使ってみてはどうでしょうか？
 ```javascript
-document.querySelector('#modalPhone').addEventListener('click', function(e)) {
+document.querySelector('.sub-contents-li').addEventListener('click', function(e)) {
   addOpenClass(e);
 }
 ```
 か
 ```javascript
-document.querySelector('#modalPhone').addEventListener('click', function(e)) {
+document.querySelector('.sub-contents-li').addEventListener('click', function(e)) {
             console.log(e.target.id);
             document.querySelector(".modalPhone").style.display = "none";
             document.querySelector(`.${e.target.id}`).style.display = "block";

3

書き方を二つ提示

2022/03/02 11:44

投稿

スコア289

test CHANGED Viewed

@@ -1,4 +1,10 @@
 js使えるならaddEventListener使ってみてはどうでしょうか？
+```javascript
+document.querySelector('#modalPhone').addEventListener('click', function(e)) {
+  addOpenClass(e);
+}
+```
+か
 ```javascript
 document.querySelector('#modalPhone').addEventListener('click', function(e)) {
             console.log(e.target.id);

2

答えを記述

2022/03/02 11:33

投稿

スコア289

test CHANGED Viewed

@@ -1,2 +1,25 @@
+js使えるならaddEventListener使ってみてはどうでしょうか？
-回答が間違いでした。
+```javascript
+document.querySelector('#modalPhone').addEventListener('click', function(e)) {
+            console.log(e.target.id);
+            document.querySelector(".modalPhone").style.display = "none";
+            document.querySelector(`.${e.target.id}`).style.display = "block";
+            const HamburgerElement = document.querySelector('.Hamburger');
+            const maskElement = document.getElementById('mask');
+            const kaijoButton = document.getElementById('mask-kaijo');
+            let res = maskElement.classList.contains('open');
+            const func1 = () => {
+                kaijoButton.style.display = 'none';
+                maskElement.classList.remove('open');
+                HamburgerElement.style.left = '-100vw';
+                HamburgerElement.style.opacity = 0;
+            }
+            const func2 = () => {
+                kaijoButton.style.display = 'block';
+                maskElement.classList.add('open');
+                HamburgerElement.style.left = 0;
+                HamburgerElement.style.opacity = 1;
+            }
+            res ? func1() : func2();
+}
-すみません
+```

1

ミス

2022/03/02 11:19

投稿

スコア289

test CHANGED Viewed

@@ -1,5 +1,2 @@
-onClickの中の関数にeventは不要なのでは？
+回答が間違いでした。
-```html
+すみません
-<img id="modalPhone" src="./images/bell.png" alt="" class="sp" onClick=addOpenClass()>
-```