alertが複数回出てしまう

解決したいこと

周期表をクリックすると、選択肢が表示されるクイズ形式のサイトをつくろうと、プログラミングをしています。
しかし、選択肢をクリックすると、正解/不正解のアラートが表をクリックした回数分、複数回出てきてしまう問題をどう解決したらよいのか分かたず困っています。
プログラミング初心者であり、わかりにくいソースコードですが、よろしければ、解決に力を貸していただけると幸いです。なお、実際のソースコードは見にくいので、簡略化してあるソースコードを記載させていただきます。（問題は簡略化してあるものでも起こること、確認済み）

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <table border="1">
11        <tr>
12            <th><button class="button">H</button></th>
13            <th><button class="button">He</button></th>
14        </tr>
15        <tr>
16            <th><button class="sentakusi">選択肢①</button></th>
17            <th><button class="sentakusi">選択肢②</button></th>
18        </tr>
19    </table>
20
21    <script src="sample.js"></script>
22</body>
23</html>
24``

JavaScript
1const genso = [
2    "水素",
3    "ヘリウム",
4]
5
6const button = document.getElementsByClassName("button");
7const sentaku = document.getElementsByClassName("sentakusi");
8
9for (let i = 0; i < button.length; i++) {
10    button[i].addEventListener("click",  () => {
11    var sentakuNo = Math.floor(Math.random() * sentaku.length)
12    sentaku[sentakuNo].textContent = genso[i];
13
14    let gensoNo1 = Math.floor(Math.random() * genso.length);
15
16    while(i === gensoNo1){
17        gensoNo1 = Math.floor(Math.random() * genso.length);
18    }
19
20    if(sentakuNo == 0){
21        sentaku[1].textContent = genso[gensoNo1];
22    }else{
23        sentaku[0].textContent = genso[gensoNo1];
24    }
25
26
27    for (let q = 0; q < 2; q++) {
28        sentaku[q].addEventListener("click",  () => {
29        if(q === sentakuNo){
30            window.alert("正解");
31        }else{
32            window.alert("不正解");
33        }
34    })};
35})};

退会済みユーザー

2021/08/12 07:34

> 正解/不正解のアラートが表をクリックした回数分、複数回出てきてしまうそのようにコーディングしてあるからではないのですか。そのように見えますけど。どうしたいのですか？

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

回答2件

ご回答ありがとうございました。

JavaScript
1const genso = [
2    "水素",
3    "ヘリウム",
4]
5
6const button = document.getElementsByClassName("button");
7const sentaku = document.getElementsByClassName("sentakusi");
8var sentakuNo;
9
10for (let i = 0; i < button.length; i++) {
11    button[i].addEventListener("click", () => {
12        sentakuNo = Math.floor(Math.random() * sentaku.length)
13        sentaku[sentakuNo].textContent = genso[i];
14
15        let gensoNo1 = Math.floor(Math.random() * genso.length);
16
17        while (i === gensoNo1) {
18            gensoNo1 = Math.floor(Math.random() * genso.length);
19        }
20
21        if (sentakuNo == 0) {
22            sentaku[1].textContent = genso[gensoNo1];
23        } else {
24            sentaku[0].textContent = genso[gensoNo1];
25        }
26
27
28
29    })
30};
31console.log(sentakuNo);
32for (let q = 0; q < 2; q++) {
33    sentaku[q].addEventListener("click", () => {
34        if (q === sentakuNo) {
35            window.alert("正解");
36        } else {
37            window.alert("不正解");
38        }
39    })
40};

投稿2021/08/12 11:45

sansu23

総合スコア1

ベストアンサー

まずインデントを整理しましょう。コードフォーマッターの導入をオススメします。

イベントリスナーの内部でさらに addEventListener を行っています。
追加したリスナーを削除していないので呼び出された回数分どんどん増えますよね。

js
1(省略)
2
3for (let i = 0; i < button.length; i++) {
4    button[i].addEventListener("click", () => {
5
6        (省略)
7
8        for (let q = 0; q < 2; q++) {
9            sentaku[q].addEventListener("click", () => {
10                if (q === sentakuNo) {
11                    window.alert("正解");
12                } else {
13                    window.alert("不正解");
14                }
15            })
16        };
17    })
18};