JavaScript　switchを使う

前提・実現したいこと

選択肢をクリックすると決まった答えが返ってくるプログラムをswitchを利用して作成したいです。

よろしくお願い致します。

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

下記のコードだと、クリックしても何も起きません（検証ツールのconsoleにも何もエラーが出ないです）。

直近で教えていただいたquerySelectorAllのところか、switch文のcaseのところが違うのかなと思うのですが、どこが間違っているのかわかりません。

該当のソースコード

  <div class="box">
    <p id="one" class="choices" onclick="judge()">1</p>
    <p id="two" class="choices" onclick="judge()">2</p>
    <p id="three" class="choices" onclick="judge()">3</p>
    <p id="four" class="choices" onclick="judge()">4</p>
  </div>

  function judge(){
  var answer = document.getElementById('answer');
  var name = document.querySelectorAll('.box.choices');

  switch(name){
    case name.id === 'one':
      answer.innerHTML = '1';
      break;
    case name.id === 'two':
      answer.innerHTML = '2'; 
      break;
    case name.id === 'three':
      answer.innerHTML = '3';
      break;
    case name.id === 'four':
      answer.innerHTML = '4'; 
      break;
  }
}

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

回答2件

HTML要素にonclickを書くならこんな感じで

javascript
1<div class="box">
2    <p id="one" class="choices" onclick="judge(this.id)">1</p>
3    <p id="two" class="choices" onclick="judge(this.id)">2</p>
4    <p id="three" class="choices" onclick="judge(this.id)">3</p>
5    <p id="four" class="choices" onclick="judge(this.id)">4</p>
6</div>
7<hr>
8<div id="answer"></div>
9<script>
10function judge(id){
11  var answer = document.getElementById('answer');
12  switch(id){
13    case 'one':
14      answer.innerHTML = '1';
15      break;
16    case 'two':
17      answer.innerHTML = '2'; 
18      break;
19    case 'three':
20      answer.innerHTML = '3';
21      break;
22    case 'four':
23      answer.innerHTML = '4'; 
24      break;
25  }
26}
27</script>