whileから抜け出せない

前提・実現したいこと

とあるチュートリアルを見ながらクイズアプリを作っています。リファクタリング前のコードだと動くのですが、
リファクタリングをすると無限ループから抜け出せません。私のミスだと思い、console.logで値を確認しながら
リファクタリングをしているのですが、どうしてもwhileループ地獄にはまってしまい、その原因がわかりません。
それも私のミスだと思うのですが、解決策が見つかりません。

アドバイスとご指摘のほどよろしくお願いします。

該当のソースコード

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  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
15
16  <meta name="theme-color" content="#fafafa">
17</head>
18<body>
19  <div class="container">
20    <div id="js-question" class="mt-3 alert alert-primary" role="alert">
21      This is a question.
22    </div>
23
24    <div class="d-flex justify-content-center">
25      <button class="btn btn-primary">Answer1</button>
26      <button class="ml-1 btn btn-primary">Answer2</button>
27      <button class="ml-1 btn btn-primary">Answer3</button>
28      <button class="ml-1 btn btn-primary">Answer4</button>
29    </div>
30  </div>
31  <script src="app.js"></script>
32</body>
33
34</html>
35

javascript
1const questions = [
2    ["ゲーム市場最も売れたゲームは？"],
3]
4
5const answers = [["SFC", "PS2", "NintendoDS","NintendoSwitch"],]
6
7const correct = [["NintendoDS"]]
8
9let $button = document.getElementsByTagName("Button")
10const setupQuiz = () =>{
11    document.getElementById("js-question").textContent = questions[0][0]
12
13    let buttonIndex = 0
14    let buttonLength = $button.length
15    while (buttonIndex < buttonLength){
16        $button[buttonIndex].textContent = answers[0][buttonIndex]
17        buttonIndex++
18    }
19}
20
21setupQuiz()
22
23const clickHandler = (e) => {
24    if (correct[0][0] === e.target.textContent){
25        window.alert('Correct!')
26    } else {
27        window.alert('Wrong...')
28    }
29}
30
31let buttonIndex = 0
32const buttonLength = $button.length
33console.log(buttonIndex)
34
35//無限ループの発生箇所
36while (buttonIndex < buttonLength){
37    $button[buttonIndex].addEventListener('click', (e) => {
38        clickHandler(e)
39        buttonIndex++
40        console.log(buttonIndex)
41    })
42}
43
44//リファクタリングしたい部分
45// $button[0].addEventListener('click', (e) => {
46//     clickHandler(e)
47// })
48//
49// $button[1].addEventListener('click', (e) => {
50//     clickHandler(e)
51// })
52//
53// $button[2].addEventListener('click', (e) => {
54//     clickHandler(e)
55// })
56//
57// $button[3].addEventListener('click', (e) => {
58//     clickHandler(e)
59// })

試したこと

つぶさにいつものtypoがないか確認しました。buttonIndexの値が0で、ループ内でインクリメントしているので、buttonLengthの値を超えるはずなのですが、なぜループしてしまうのか原因がわかりません。

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

周囲がセミコロンなしの派閥が多いので、セミコロンレスで書いています。
ツール：Webstorm
ブラウザー：Chrome

hentaiman

2020/10/10 21:46

console.logをwhileの直下で出力すればもう少し前進すると思います

hentaiman

2020/10/10 21:47

それとaddEventListenerの動作も併せて理解し直しましょう

m.ts10806

2020/10/10 21:57 編集

>周囲がセミコロンなしの派閥が多いので、セミコロンレスで書いています。 JavaScriptが文末セミコロンなしで動くのはそれなりにやってきていればわかることなので、そこに指摘が入ることはないと思います。それよりも動作確認したブラウザとか使っているツールとか書かれたほうが良いです。

m.ts10806

2020/10/10 22:11

「クリックしたときにしか加算されない」というのは認識されていますか？

kalon

2020/10/10 22:17

@m.ts10806様認識していませんでした。ご指摘ありがとうございます。

m.ts10806

2020/10/10 22:22

addEventListenerの機能をきちんとおさえると良いかと思います。 https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener 要は「どのタイミングでイベントを発生させるか」を定義する機能です。

hentaiman

2020/10/11 06:19

なんじゃ解決の仕方よりデバッガーを求めていたんか

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

回答1件

ベストアンサー

addEventListenerでは、ターゲット(今回はボタン)にイベント(今回はクリック)が配信されるときに実行するイベントリスナー(関数)を設定します。提示されたコードでは、イベントリスナーがアロー関数(ラムダ式)で書かれているので、whileループ内の(e) => { ... }の部分が設定内容です。

ということは、上記「...」の部分に書かれた内容は、whileループ中で実行されるわけではなく、イベント発生時に備えて設定しておくだけですよね。そこに、buttonIndex++などを書いても、繰り返しの最中に更新されませんから……あとはわかるな?

JavaScript
1while (buttonIndex < buttonLength) {
2    $button[buttonIndex].addEventListener('click', (e) => {
3        clickHandler(e)
4    })
5    buttonIndex++
6    console.log(buttonIndex)
7}