javascriptでクイズの正誤判定が機能しません。。。

前提・実現したいこと

javascriptでクイズアプリを作ろうと思っていたのですが、正誤判定機能がうまく働きません。
どなたか原因を教えてくださるとありがたいです。

console.log(e.target.textContent);　で調べたところ以下のエラーがでました。

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

VM212:1 Uncaught ReferenceError: e is not defined
    at <anonymous>:1:13
(anonymous) @ VM212:1

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charaset="utf-8">
  <title>サイト名</title>
  <link rei="icon" href="favicon.ico">
  <meta name="description" content="サイトの説明">
  <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/701cbd5fa6.js" crossorigin="anonymous"></script>

<style type="text/css">
.btns{
  text-align:center;
  background-color:gray;
  }
.alert{
  text-align: center;
  color:black;
  }
  .nav{
    display:flex;
    justify-content:flex-end ;
  }
</style>

</head>
<body>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>
  
    <div id="js-question" class="alert alert-danger mt-5 mb-0" role="alert">
      aaaaaa
    </div>
    <div class="btns mp-5">
      <button type="button" class="btn btn-dark mx-2">A</button>
      <button type="button" class="btn btn-dark mx-2">B</button>
      <button type="button" class="btn btn-dark mx-2">C</button>
      <button type="button" class="btn btn-dark mx-2">D</button>
    </div>
  


  <script src="app.js"></script>
</body>
</html>

//ここからjsファイルです

/問題３つ分の定義
const quiz=[
  {question:"【第1問】お酢に卵を殻ごと入れるとどうなるでしょう？",
  answers:["溶けてなくなる","鏡のようになる","透明になる","鉄のように固くなる"],
  correct:["透明になる"]
},{
  question:"【第2問】問題文",
  answers:["A","B","C","D"],
  correct:["A"]
},{
  question:"【第3問】問題文",
  answers:["A","B","C","D"],
  correct:["D"]
},{
  question:"ありがとう",
  answers:["お","し","ま","い"],
  correct:["お"]
}
];
let quizIndex=0;
const quizLength=(quiz.length+1);
const number=(quiz.length);
let score=0;

const $button=document.getElementsByTagName("button");
const answersLength=quiz[quizIndex].answers.length;

//問題文と選択肢の定義
const stepupQuiz=()=>{
  document.getElementById("js-question").textContent=quiz[quizIndex].question;
  let buttonIndex=0;
  while(buttonIndex<answersLength){
    $button[buttonIndex].textContent=quiz[quizIndex].answers[buttonIndex];
    buttonIndex++;
  };
}
stepupQuiz();

//正誤判定システム
const clickHandler = (e) => {
  if(quiz[quizIndex].correct === e.target.textContent){
     window.alert('正解！');
     score++;
  } else {
     window.alert('不正解！');
  }
 

  console.log(quiz[quizIndex].correct);

   //正解したら次の問題文に飛ぶシステム  
   quizIndex++;
   if(quizIndex < answersLength){
    stepupQuiz();
   }else{
      window.alert("終わり");
   }
};

let handlerIndex = 0;
while (handlerIndex < answersLength){
  $button[handlerIndex].addEventListener("click",(e)=>{
    clickHandler(e);
  });
  handlerIndex++;
};

試したこと

色々調べたのですが、全くわからず困っています。

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

visual studio codeを使っています

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

回答1件

ベストアンサー

correct:["透明になる"]

ここが配列になっているためエラーになるようです。

correct:"透明になる"

とすべて文字列に直せば

if(quiz[quizIndex].correct === e.target.textContent){

ここで文字列の比較として判定されてtrueになる場合が発生します。

投稿2021/06/07 17:03

gas.engine

総合スコア608

pawapurokun

2021/06/07 17:08

本当にありがとうございました！！！！うまく正解が出てきました！！！分からな過ぎて萎えていたので、本当にありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！