条件分岐とclick

Question

前提・実現したいこと

addEventListener を使用して、clickされた選択肢によって下記のような条件分岐を行いたいです。

どの選択肢がクリックされても1つのswitch文に辿り着くようにしたいです

event.target やバブリングについて調べながら使用しているのですが、上手くいかないのでヒントをいただければと思います。

発生している問題・エラーメッセージ

検証ツールで選択肢をクリックしても何も反応しない。

console にエラーも出ない。

該当のソースコード

  <div id="box">
    <p id="one">1</p>
    <p id="two">2</p>
    <p id="three">3</p>
    <p id="four">4</p>
  </div>

  <p id="answer1"></p>

  <p id="answer2"></p>

  <p id="answer3"></p>


var answer1 = document.getElementById('answer1');
var answer2 = document.getElementById('answer2');
var answer3 = document.getElementById('answer3');
var six = 5000;
var seven = 6000;

var box = document.getElementById('box');
box.addEventListener('click', function(e){
  var target = e.target;
  switch(target.id){
    case 'one':                   
      answer1.innerHTML = '一';
      break;
    case 'two':                   
      answer1.innerHTML = '二';
      break;
    case 'three':                   
      answer1.innerHTML = '三';
      break;
    case 'four':                  
      answer1.innerHTML = '四？'; 
      answer2.innerHTML = '五'; 

      answer2.addEventListener('click', function(){
        if(six >= seven){
          answer3.innerHTML = '六';
        } else{
          answer3.innerHTML = '七'; 
        }
      }, false);
  }
}, false);

試したこと

https://q.hatena.ne.jp/1304687034

こちらを参考にしました

Comments

[m.ts10806]

answer1とかどこにあるのでしょう。
boxでイベントとってtarget.idってboxでしかないのでは。

[退会済みユーザー]

すみませんそこの処理まで辿り着くことすらできなかったので載せていませんでした。

参考にしたページで子要素が取得できているように見えたので、調べながら上記のように書いたのですが、エラーも出なかったので詰まり質問をさせていただきました。

[m.ts10806]

他者がコピペで質問者と同じ状況を再現できるようになってなければ答えようがないときの方が多いです。情報は多ければ多いほど

[退会済みユーザー]

ご丁寧にありがとうございます。

Answer 1

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

sample

<div id="box">
<p class="one">1</p>
<p class="two">2</p>
<p class="three">3</p>
<p class="four">4</p>
</div>
<div id="answer1"></div>
<div id="answer2"></div>
<div id="answer3"></div>

<script>
const answer1=document.querySelector('#answer1');
const answer2=document.querySelector('#answer2');
const answer3=document.querySelector('#answer3');
document.addEventListener('click', e=>{
  var target = e.target;
  if(target.closest('#box')){
    switch(true){
    case target.classList.contains('one'):
      answer1.innerHTML = '一';
      break;
    case target.classList.contains('two'):
      answer1.innerHTML = '二';
      break;
    case target.classList.contains('three'):
      answer1.innerHTML = '三';
      break;
    case target.classList.contains('four'):
      answer1.innerHTML = '四？'; 
      answer2.innerHTML = '五'; 
    }
  }
  if(target.closest('#answer2')){
    answer3.innerHTML = '六';
  }
});
</script>

Comments

[退会済みユーザー]

ありがとうございます。

エラーすら出なかったので、それ以前の問題かと思い省いてしまいました。
失礼いたしました。
試行錯誤中にそのままだったclassをidに修正しました。

addEventListenerの中にaddEventListenerという点は、初めて行ったことなので上記が解決して動作確認ができてから自身で修正していこうと思います。
ご指摘ありがとうございます。

[yambejp]

全体的に意味がわからない箇所が多いのですが、一応sampleが近い形になると思います

[退会済みユーザー]

ご丁寧にありがとうございます。

Answer 2

answerを適当に追加しました。
sixやsevenが何を表しているのか分からないため省略していますが、
以下を参考にして、ご自分で追加してください。

<div id="box">
  <p class="one">1</p>
  <p class="two">2</p>
  <p class="three">3</p>
  <p class="four">4</p>
</div>
<div id="answer"></div>

document.addEventListener("DOMContentLoaded", () => {
  const answer = document.querySelector("#answer");
  const pList = document.querySelectorAll("#box p");
  pList.forEach((p) => {
    p.addEventListener("click", (evt) => {
      switch (evt.target.className) {
        case "one":
          answer.innerHTML = "一";
          break;
        case "two":
          answer.innerHTML = "二";
          break;
        case "three":
          answer.innerHTML = "三";
          break;
        case "four":
          answer.innerHTML = "四？";
          answer.innerHTML = "五";
      }
    });
  });
});

追記

すみません。参考先のサイト見てませんでした。
親要素へバブリングしてきたイベントから判断したいのであれば、以下を参考にしてください。

document.addEventListener("DOMContentLoaded", () => {
  const answer = document.querySelector("#answer");
  document.querySelector("#box").addEventListener("click", (evt) => {
    if (evt.target.tagName !== "P") return;
    switch (evt.target.className) {
      case "one":
        answer.innerHTML = "一";
        break;
      case "two":
        answer.innerHTML = "二";
        break;
      case "three":
        answer.innerHTML = "三";
        break;
      case "four":
        answer.innerHTML = "四？";
        answer.innerHTML = "五";
    }
  });
});

Comments

[退会済みユーザー]

ご丁寧にありがとうございます。

1行ずつ調べて参考にさせていただきます。