Q&A
前提・実現したいこと
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件
0
ベストアンサー
correct:["透明になる"]
ここが配列になっているためエラーになるようです。
correct:"透明になる"
とすべて文字列に直せば
if(quiz[quizIndex].correct === e.target.textContent){
ここで文字列の比較として判定されてtrueになる場合が発生します。
投稿2021/06/07 17:03
総合スコア608
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/07 17:08