前提・実現したいこと
簡単なクイズゲームで、ボタンを押して回答するたびに自動で次の問題が表示されるようにしたいです
発生している問題・エラーメッセージ
ボタンをクリックして、"quiz_num" の数値が変化してもtextcontentでの書き換えに反映されません。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 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 <link rel="stylesheet" href="クイズ.css"> 9</head> 10<body> 11 <p class="question" id="question">問題</p> 12 13 <p class="answer"> 14 <button>1</button> 15 <button>2</button> 16 <button>3</button> 17 <button>4</button> 18 </p> 19 <script type="text/javascript"> 20 const quiz = [ 21 { 22 question_sentence : "愛知県の県庁所在地は?", 23 answer_word : ["名古屋","岐阜","静岡","津"], 24 correct : ["名古屋"] 25 }, 26 { 27 question_sentence : "東京の県庁所在地は?", 28 answer_word : ["水戸","甲府","東京","宇都宮"], 29 correct : ["東京"] 30 }, 31 { 32 question_sentence : "大阪の県庁所在地は?", 33 answer_word : ["大津","和歌山","神戸","大阪"], 34 correct : ["大阪"] 35 }, 36 { 37 question_sentence : "北海道の県庁所在地は?", 38 answer_word : ["札幌","仙台","那覇","金山"], 39 correct : ["札幌"] 40 }, 41 ]; 42 43 const $button = document.getElementsByTagName("button"); 44 45 let quiz_num = 0; 46 let button_length = $button.length; 47 let button_num = 0; 48 let click_num = 0; 49 50 const click_event = (e)=>{ 51 if(quiz[quiz_num].correct[0] === e.target.textContent){ 52 window.alert("正解!"); 53 }else{ 54 window.alert("残念…"); 55 }; 56 quiz_num++; 57 }; 58 59 document.getElementById("question").textContent = quiz[quiz_num].question_sentence; 60 61 while(button_num < button_length){ 62 $button[button_num].textContent = quiz[quiz_num].answer_word[button_num]; 63 button_num++; 64 }; 65 66 while(click_num < button_length){ 67 $button[click_num].addEventListener("click" , (e)=>{ 68 click_event(e); 69 }) 70 click_num++; 71 }; 72 </script> 73</body> 74</html>
試したこと
変数(let quiz_num = 0)の値を直接変えればページの表示が変化しました
補足情報(FW/ツールのバージョンなど)
Google Chrome
VScode 1.60.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/27 14:23