クイズの回答を画像で選択、指定したい

問題文に出た名前の画像を正しくクリックするとアラートで正解、間違えていると残念と表示されるゲームを作りたい

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

調べていますが、回答を画像と紐づけるのが難しく、できません。
様々な動画や記事を参考に手直ししていたからか自分でもわからなくなってしましました。
htmlを触って一週間なのであやふやですが、おそらく問題文の提示と画像表示、ボタンの設定はできているはずですが
回答の指定ができず、画像と結びつきません。
色々試して現在は[]内に配列して[0][1]・・・・と指定したいのですが、完全に詰まって3日ここから先に進めません。
もしこれ以外の解決法やこの問題に対する検索方法をご存じの方がいらっしゃればお手数おかけしますがお力を貸してください。

ちなみに最終的には、画像選択時に音を鳴らしたり、問題文だけ変えて同じことを5回ほどやってリザルトを表示させるつもりです。

該当のソースコード

HTML

 ```ここに言語を入力
 <body>
    <!-- 画像使用、作成後いれる！ -->
    <div class="h">
      <img src="img/A.png" height="200px" width="1200px" alt="タイトル" />
    </div>

    <!-- 問題文を表示させたい -->
    <div class="q">
      <div id="js-question"></div>
    </div>

    <!-- 大きな箱の中に10個のボタン（回答画像）を配列したい -->
    <div class="box">
      <button>
        <img class="button" id="A" src="img/A.png" alt="" />
      </button>
      <button>
        <img class="button" id="B" src="img/B.png" alt="" />
      </button>
      <button>
        <img class="button" id="C" src="img/C.png" alt="" />
      </button>
      <button>
        <img class="button" id="D" src="img/D.png" alt="" />
      </button>
      <button>
        <img class="button" id="E" src="img/E.png" alt="" />
      </button>
      <button>
        <img class="button" id="F" src="img/F.png" alt="" />
      </button>
      <button>
        <img class="button" id="G" src="img/G.png" alt="" />
      </button>
      <button>
        <img class="button" id="H" src="img/H.png" alt="" />
      </button>
      <button>
        <img class="button" id="I" src="img/I.png" alt="" />
      </button>
      <button>
        <img class="button" id="j" src="img/J.png" alt="" />
      </button>
    </div>

    <!-- 最後-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- jsを読み込む -->
    <script src="js/app.js"></script>
    <!-- 最後 -->
  </body>

CSS
1body {
2  background-color: darkseagreen;
3}
4
5.h {
6  margin: 1% auto;
7  height: 200px;
8  width: 1200px;
9  border: 3px solid black;
10}
11
12.q {
13  background-color: aliceblue;
14  height: 100px;
15  width: 800px;
16  margin: 2% auto;
17  border: 8px solid lightcoral;
18  font-size: 55px;
19  text-align: center;
20  display: flex;
21  align-items: center;
22}
23
24.box {
25  width: 900px;
26  height: 350px;
27  border: 3px solid black;
28  display: flex;
29  flex-wrap: wrap;
30  justify-content: space-around;
31  margin: 2% auto;
32  background-color: greenyellow;
33}
34
35.button {
36  display: inline-block;
37  border-radius: 0;
38  box-shadow: 1px 1px 1px #666666;
39  cursor: pointer;
40  transition: 0.3s;
41  width: 130px;
42  height: 130px;
43  border: 3px solid red;
44  background-color: antiquewhite;
45}
46
47.button:hover {
48  box-shadow: none;
49  border-radius: 50%;
50}
51

javascript
1const question = "「A」はだれかな？";
2
3const answers = [document.getElementById("A")];
4
5const correct = document.getElementById("A");
6
7// 定数の文字列をHTMLに反映させる
8document.getElementById("js-question").textContent = question;
9
10// // 長いからbuttonでまとめたよ
11const $button = document.getElementsByTagName("button");
12
13$button[0] = answers[0];
14$button[1] = answers[1];
15$button[2] = answers[2];
16$button[3] = answers[3];
17$button[4] = answers[4];
18$button[5] = answers[5];
19$button[6] = answers[6];
20$button[7] = answers[7];
21$button[8] = answers[8];
22
23// // ボタンをクリックしたら正誤判定
24$button[0].addEventListener("click", () => {
25  if (correct === $button[0]) {
26    alert("あたり！");
27  } else {
28    alert("ざんねん・・・");
29  }
30});
31$button[1].addEventListener("click", () => {
32  if (correct === $button[1]) {
33    alert("あたり！");
34  } else {
35    alert("ざんねん・・・");
36  }
37});
38$button[2].addEventListener("click", () => {
39  if (correct === $button[2]) {
40    alert("あたり！");
41  } else {
42    alert("ざんねん・・・");
43  }
44});
45$button[3].addEventListener("click", () => {
46  if (correct === $button[3]) {
47    alert("あたり！");
48  } else {
49    alert("ざんねん・・・");
50  }
51});
52$button[4].addEventListener("click", () => {
53  if (correct === $button[4]) {
54    alert("あたり！");
55  } else {
56    alert("ざんねん・・・");
57  }
58});
59$button[5].addEventListener("click", () => {
60  if (correct === $button[5]) {
61    alert("あたり！");
62  } else {
63    alert("ざんねん・・・");
64  }
65});
66$button[6].addEventListener("click", () => {
67  if (correct === $button[6]) {
68    alert("あたり！");
69  } else {
70    alert("ざんねん・・・");
71  }
72});
73$button[7].addEventListener("click", () => {
74  if (correct === $button[7]) {
75    alert("あたり！");
76  } else {
77    alert("ざんねん・・・");
78  }
79});
80$button[8].addEventListener("click", () => {
81  if (correct === $button[8]) {
82    alert("あたり！");
83  } else {
84    alert("ざんねん・・・");
85  }
86});
87$button[9].addEventListener("click", () => {
88  if (correct === $button[9]) {
89    alert("あたり！");
90  } else {
91    alert("ざんねん・・・");
92  }
93});
94

質問も初めてですので、足りない情報や作法があれば教えてください。
追記させていただきます。

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

回答1件

画像を押した瞬間に回答とみなすのでしょうか？
であればbuttonにnameとvalueを指定してあげればよいでしょう
画像をまず選択して、回答ボタンをおすような２段階の仕組みなら
ラジオボタンで回答候補を保持すればよいでしょう

投稿2021/03/03 02:31

yambejp

総合スコア116661

ALcotNelly

2021/03/03 02:39

素早い回答ありがとうございます！画像を押した瞬間に回答とみなす方式が望ましいので buttonにnameとvalueを追加してみようと思います！まだ追加後どうやってjavascriptに紐づけるのかよくわからないので少し自分でやり方を検索して試してみます。もしうまくいかなけばまたコメントさせていただきます。

yambejp

2021/03/03 02:55 編集

正解のもたせ方次第ですね <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('[name="a1"]').forEach(x=>{ x.addEventListener('click',(e)=>{ alert(e.target.closest('button[data-correct]')?"正解":"まちがい"); }); }); }); </script> <button type="button" name="a1" value="1" data-correct="1"><img src="" alt="img1"></button> <button type="button" name="a1" value="2"><img src="" alt="img2"></button> <button type="button" name="a1" value="3"><img src="" alt="img3"></button>

ALcotNelly

2021/03/03 10:32

コードまでありがとうございます！おかげで対応する画像をクリックして希望するアラートが表示されました！画像表示を希望通りにするのに時間がかかってしまいましたが… その後、また理想に近づけるべく調べていたのですがこの問題を五回ほど繰り返したのちにリザルトが出るようにしたいのですが出来ずにまた詰まってしまいました。いろんな記事や動画を見ながら修正してもうまくいかず結局上記のコメントにあるコードのまま止まっています回答欄はそのままで問題文の中身と正当の入れ替えをする場合どのようにしたり、また参考記事、調べ方がありますでしょうか？本当に独学で手探りな状況なので沢山ご迷惑をおかけして申し訳ございません。お手数ですが、引き続きお力を貸してください、。

yambejp

2021/03/04 00:06

> この問題を五回ほど繰り返したのちにリザルトが出る 1問ボタンをおすと次のページに進む感じですか？それとも5問全て表示して5つ選択したら結果を表示するのでしょうか？

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