クイズの正誤判定が一部しか反映されない

前提・実現したいこと

四択クイズでそれぞれに正解不正解のメッセージを出したいのですが一つ目の選択肢しか反映されません。画像を載せようとしても反映されないのでエラー部分を載せておきます。

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

該当のソースコード

Javascript
1const question = 'ゲーム史上、最も売れたゲーム機は次のうちどれ？';
2const answers = [
3'スーパーファミコン',
4'プレイステーション',
5'ニンテンドースイッチ',
6'ニンテンドーDS'
7]
8const correct = 'ニンテンドーDS';
9
10console.log(document.getElementById('js-question').textContent = question);
11const button = document.getElementsByTagName('button')
12button[0].textContent = answers[0];
13button[1].textContent = answers[1];
14button[2].textContent = answers[2];
15button[3].textContent = answers[3];
16
17
18document.getElementsByTagName('button')[0].addEventListener('click', ()=>{
19  if(correct === document.getElementsByTagName('button')[0].textContent){
20window.alert('正解！');
21  }else{
22window.alert('不正解！');
23    }
24});
25
26$('button')[1].addEventListener('click', () => {
27  if(correct === button[1].textContent){
28window.alert('正解！');
29  }else{
30window.alert('不正解！');
31    }
32});
33
34$('button')[2].addEventListener('click', () => {
35  if(correct === button[2].textContent){
36window.alert('正解！');
37  }else{
38window.alert('不正解！');
39    }
40});
41
42$('button')[3].addEventListener('click', () => {
43  if(correct === button[3].textContent){
44window.alert('正解！');
45  }else{
46window.alert('不正解！');
47    }
48});
49

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18  <script src = "app.js"></script>
19  </body>
20  <link rel="stylesheet" href="css/normalize.css">
21  <link rel="stylesheet" href="css/main.css">
22  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
23   crossorigin="anonymous">
24<meta name="theme-color" content="#fafafa">
25</head>
26
27<body>
28  <div class="container">
29    <!-- Content here -->
30  <!-- Add your site or application content here -->
31  <p> </p>
32
33<div id="js-question" class="mt-3 alert alert-primary" role="alert">
34    A simple primary alert—check it out!
35  </div>
36<div class="d-flex justify-content-center">
37<button type="button" class="btn btn-primary">Primary</button>
38<button type="button" class="ms-1 btn btn-primary">Primary</button>
39<button type="button" class="ms-1 btn btn-primary">Primary</button>
40<button type="button" class="ms-1 btn btn-primary">Primary</button>
41</div>
42</div>
43<script src = "app.js"></script>
44
45</body>
46
47</html>

試したこと

ここに問題に対して試したことを記載してください。
見直し

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

miyabi_pudding

2021/03/30 03:44

HTMLも記載して下さい。

int32_t

2021/03/30 03:44

HTMLも開示してください。ブラウザの開発者ツールのコンソールにエラーは出ていますか?

hanpan

2021/03/30 07:09

consoleでエラーが出てます

int32_t

2021/03/30 07:12

エラーの内容は問題解決するためにとてもとても重要です。質問文に含めてくださいね。

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

回答2件

ベストアンサー

$('button')[1].addEventListener('click', () => {

$という関数がないので、ここから後はエラーで実行されてないと思います。

$('button')[1] を button[1] に変えれば動くと思いますが、そもそも同じようなコードを4回も書くのはスマートではないので、一つにまとめましょう。

js
1document.addEventListener('click', event => {
2  if (event.target.tagName == 'BUTTON') {
3    if (correct === event.target.textContent){
4      window.alert('正解！');
5    } else {
6      window.alert('不正解！');
7    }
8  }
9});