前提・実現したいこと
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
こちらを参考にしました
回答2件
あなたの回答
tips
プレビュー