【JavaScript：エラー対処法】Uncaught TypeError: Cannot read property '' of undefined

Question

前提・実現したいこと

JavaScript初心者です。
JavaScriptの実装演習として4択クイズアプリケーションを制作中です。
ボタンを押すと正誤判定のロジックが回り、正解か不正解か表示するロジックを組んでいます。

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

もし、4択のボタンのうちテキスト内容（textContent）が同じならば正解、それ以外なら不正解というロジックを各ボタン（4個）それぞれにコーディングしたのですが同じような命令が4つ並んでいたのでwhile文で一つにまとめよう（リファクタリングしよう）と思いコードを修正していたところ以下のエラーが発生してしまいました。

Uncaught TypeError: Cannot read property 'textContent' of undefined
    at HTMLDivElement.<anonymous> (quiz.js:99)

while文に直す前は正常に動いていたのですが、wihleの中に入れたらエラーになってしまいました。

該当のソースコード

    const $answer_block_js = document.getElementsByClassName("answer-block");
    const $answer_text_js = document.getElementsByClassName("answer-text");
    let click_counter = 0;
/*リファクタリング前（問題なく動いていた）
    $answer_block_js[0].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[0].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[1].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[1].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[2].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[2].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

     $answer_block_js[3].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[3].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

    */
    //リファクタリング後（ifの条件でエラー）
    while(click_counter<$answer_block_js.length)
        {
            $answer_block_js[click_counter].addEventListener("click",() => {
                                            if(quiz_contents[0].correct === $answer_text_js[click_counter].textContent)
                                               {
                                                    window.alert("正解！");
                                               }
                                            else
                                               {
                                                    window.alert("不正解！");
                                               }
                                            });

            console.log($answer_block_js[click_counter]);
            console.log($answer_text_js[click_counter].textContent);
            
            click_counter++;
        }
        
        console.log(quiz_contents[0].correct);

                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                        <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>
                    <div class="answer-block px-3 py-2 m-2">
                        <p class="answer-text"></p>
                    </div>

試したこと

Uncaught TypeError: Cannot read property 'textContent' of undefinedであったので、textContentを取得するものがないのかと思い、

console.log($answer_block_js[click_counter]);
console.log($answer_text_js[click_counter].textContent);

を試したのですがどちらも正常に取得出来ました。
どこを修正すればよいのかエラーが直るのか詰まってしまいました。。。

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

どうぞよろしくお願いいたします。

Answer 1

while (click_counter < $answer_block_js.length) {
    let cnt = click_counter;
    $answer_block_js[click_counter].addEventListener("click", () => {
        // click_counter の値が $answer_block_js.length と同じになっているはず。
        console.log(click_counter);
        console.log(cnt); // これで思っている値は採れませんか？
    });
    click_counter++;
}

Comments

[oyatk]

ご回答ありがとうございます。
解決いたしました！
ご教授誠にありがとうございます。

原因の質問なのですが、一つのWhileの中で変数の使いまわしは良くなかったということでしょうか。

[kei344]

使い回しというより変数のスコープの問題です。変数がいつどのタイミングで更新されるかを注意してみてください。（ y_waiwai さんが「そのエラーが出たところの変数の値がどうなってるか見てみればどうでしょう」とおっしゃっている部分です）

[oyatk]

原因は変数のスコープの旨、承知いたしました。
以後、注意しながら実装してみます。

ご対応、ありがとうございました！

Answer 2

Uncaught TypeError: Cannot read property 'textContent' of undefined

undefined の変数には 'textContent'というプロパティがありません、とおっしゃってますよ。
そのエラーが出たところの変数の値がどうなってるか見てみればどうでしょう

Comments

[oyatk]

ご回答誠にありがとうございます。

該当の変数（$answer_text_js[click_counter]）をconsole.logで確認したところ、文字列が入っている<p>が正常に取得できました。また、$answer_text_js[click_counter].textContentもconsole.logで確認したところ意図した文字列を取得することが出来ました。
ただこれをIFの条件分岐に入れるとエラーが起きてしまします。原因をご教授いただけますと幸いです。

どうぞよろしくお願いいたします。

[y_waiwai]

click_counterの値はどうなってますか。配列の範囲超えるとコケますよ

[oyatk]

返信が遅れ申し訳ありません。
console.log(click_counter);を確認したところ、0,1,2,3と数字が取れました。（$answer_text_jsのlengthは4です。）

If文の条件分岐には特殊な書き方が必要などあるのでしょうか。