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

回答編集履歴

3

chousei

2021/04/22 10:39

投稿

yambejp
yambejp

スコア117944

answer CHANGED
@@ -1,4 +1,45 @@
1
1
  answer1,2,3の指定もないし、sixやsevenも意味不明
2
2
  idを指定しているのにclassだったりしています
3
3
  それとaddEventListenerの中にaddEventListenerを指定すると
4
- clickするたびにイベントが追加されることになります、大丈夫ですか?
4
+ clickするたびにイベントが追加されることになります、大丈夫ですか?
5
+
6
+ # sample
7
+ ```javascript
8
+ <div id="box">
9
+ <p class="one">1</p>
10
+ <p class="two">2</p>
11
+ <p class="three">3</p>
12
+ <p class="four">4</p>
13
+ </div>
14
+ <div id="answer1"></div>
15
+ <div id="answer2"></div>
16
+ <div id="answer3"></div>
17
+
18
+ <script>
19
+ const answer1=document.querySelector('#answer1');
20
+ const answer2=document.querySelector('#answer2');
21
+ const answer3=document.querySelector('#answer3');
22
+ document.addEventListener('click', e=>{
23
+ var target = e.target;
24
+ if(target.closest('#box')){
25
+ switch(true){
26
+ case target.classList.contains('one'):
27
+ answer1.innerHTML = '一';
28
+ break;
29
+ case target.classList.contains('two'):
30
+ answer1.innerHTML = '二';
31
+ break;
32
+ case target.classList.contains('three'):
33
+ answer1.innerHTML = '三';
34
+ break;
35
+ case target.classList.contains('four'):
36
+ answer1.innerHTML = '四?';
37
+ answer2.innerHTML = '五';
38
+ }
39
+ }
40
+ if(target.closest('#answer2')){
41
+ answer3.innerHTML = '六';
42
+ }
43
+ });
44
+ </script>
45
+ ```

2

ちょうせい

2021/04/22 10:39

投稿

yambejp
yambejp

スコア117944

answer CHANGED
@@ -1,3 +1,4 @@
1
+ answer1,2,3の指定もないし、sixやsevenも意味不明
1
- answerの指定もないし、idを指定しているのにclassだったりしています
2
+ idを指定しているのにclassだったりしています
2
3
  それとaddEventListenerの中にaddEventListenerを指定すると
3
4
  clickするたびにイベントが追加されることになります、大丈夫ですか?

1

chousei

2021/04/22 10:06

投稿

yambejp
yambejp

スコア117944

answer CHANGED
@@ -1,1 +1,3 @@
1
- answerの指定もないし、idを指定しているのにclassだったりしています
1
+ answerの指定もないし、idを指定しているのにclassだったりしています
2
+ それとaddEventListenerの中にaddEventListenerを指定すると
3
+ clickするたびにイベントが追加されることになります、大丈夫ですか?