実現してほしい所
JavascriptをHTML上で表示させたいです。
発生した問題
Javascriptでクイズを作っています。
マニュアルに書いてある通りにクイズを作ったので、間違いがないように見えますが、
ReferenceError: can't access lexical declaration `myQuestions' before initialization
と表示されてしまいます。何回も見直しましたが特に間違いだと思うところはありませんでした。
これが全てのコードになります。
Javascript
1const quizContainer = document.getElementById('quiz'); 2const resultsContainer = document.getElementById('results'); 3const submitButton = document.getElementById('submit'); 4function buildQuiz(){} 5 6function showResults(){} 7 8// display quiz right away 9buildQuiz(); 10 11// on submit, show results 12submitButton.addEventListener('click', showResults); 13const myQuestions = [ 14 { 15 question: "Who is the strongest?", 16 answers: { 17 a: "Superman", 18 b: "The Terminator", 19 c: "Waluigi, obviously" 20 }, 21 correctAnswer: "c" 22 }, 23 { 24 question: "What is the best site ever created?", 25 answers: { 26 a: "SitePoint", 27 b: "Simple Steps Code", 28 c: "Trick question; they're both the best" 29 }, 30 correctAnswer: "c" 31 }, 32 { 33 question: "Where is Waldo really?", 34 answers: { 35 a: "Antarctica", 36 b: "Exploring the Pacific Ocean", 37 c: "Sitting in a tree", 38 d: "Minding his own business, so stop asking" 39 }, 40 correctAnswer: "d" 41 } 42]; 43function buildQuiz(){ 44 // we'll need a place to store the HTML output 45 const output = []; 46 47 // for each question... 48 myQuestions.forEach( 49 (currentQuestion, questionNumber) => { 50 51 // we'll want to store the list of answer choices 52 const answers = []; 53 54 // and for each available answer... 55 for(letter in currentQuestion.answers){ 56 57 // ...add an HTML radio button 58 answers.push( 59 `<label> 60 <input type="radio" name="question${questionNumber}" value="${letter}"> 61 ${letter} : 62 ${currentQuestion.answers[letter]} 63 </label>` 64 ); 65 } 66 67 // add this question and its answers to the output 68 output.push( 69 `<div class="question"> ${currentQuestion.question} </div> 70 <div class="answers"> ${answers.join('')} </div>` 71 ); 72 } 73 ); 74 75 // finally combine our output list into one string of HTML and put it on the page 76 quizContainer.innerHTML = output.join(''); 77} 78myQuestions.forEach( (currentQuestion, questionNumber) => { 79 // here goes the code we want to run for each question 80}); 81// we'll want to store the list of answer choices 82const answers = []; 83 84// and for each available answer... 85for(letter in currentQuestion.answers){ 86 87 // ...add an html radio button 88 answers.push( 89 `<label> 90 <input type="radio" name="question${questionNumber}" value="${letter}"> 91 ${letter} : 92 ${currentQuestion.answers[letter]} 93 </label>` 94 ); 95} 96 97// add this question and its answers to the output 98output.push( 99 `<div class="question"> ${currentQuestion.question} </div> 100 <div class="answers"> ${answers.join('')} </div>` 101); 102quizContainer.innerHTML = output.join(''); 103function showResults(){ 104 105 // gather answer containers from our quiz 106 const answerContainers = quizContainer.querySelectorAll('.answers'); 107 108 // keep track of user's answers 109 let numCorrect = 0; 110 111 // for each question... 112 myQuestions.forEach( (currentQuestion, questionNumber) => { 113 114 // find selected answer 115 const answerContainer = answerContainers[questionNumber]; 116 const selector = 'input[name=question'+questionNumber+']:checked'; 117 const userAnswer = (answerContainer.querySelector(selector) || {}).value; 118 119 // if answer is correct 120 if(userAnswer===currentQuestion.correctAnswer){ 121 // add to the number of correct answers 122 numCorrect++; 123 124 // color the answers green 125 answerContainers[questionNumber].style.color = 'lightgreen'; 126 } 127 // if answer is wrong or blank 128 else{ 129 // color the answers red 130 answerContainers[questionNumber].style.color = 'red'; 131 } 132 }); 133 134 // show number of correct answers out of total 135 resultsContainer.innerHTML = numCorrect + ' out of ' + myQuestions.length; 136} 137// gather answer containers from our quiz 138const answerContainers = quizContainer.querySelectorAll('.answers'); 139 140// keep track of user's answers 141let numCorrect = 0; 142// for each question... 143myQuestions.forEach( (currentQuestion, questionNumber) => { 144 145 // find selected answer 146 const answerContainer = answerContainers[questionNumber]; 147 const selector = `input[name=question${questionNumber}]:checked`; 148 const userAnswer = (answerContainer.querySelector(selector) || {}).value; 149 150 // if answer is correct 151 if(userAnswer===currentQuestion.correctAnswer){ 152 // add to the number of correct answers 153 numCorrect++; 154 155 // color the answers green 156 answerContainers[questionNumber].style.color = 'lightgreen'; 157 } 158 // if answer is wrong or blank 159 else{ 160 // color the answers red 161 answerContainers[questionNumber].style.color = 'red'; 162 } 163}); 164// find selected answer 165const answerContainer = answerContainers[questionNumber]; 166const selector = `input[name=question${questionNumber}]:checked`; 167const userAnswer = (answerContainer.querySelector(selector) || {}).value; 168// if answer is correct 169if(userAnswer===currentQuestion.correctAnswer){ 170 // add to the number of correct answers 171 numCorrect++; 172 173 // color the answers green 174 answerContainers[questionNumber].style.color = 'lightgreen'; 175} 176// if answer is wrong or blank 177else{ 178 // color the answers red 179 answerContainers[questionNumber].style.color = 'red'; 180} 181// show number of correct answers out of total 182resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; 183(function(){ 184 // put the rest of your code here 185})();
問題が発生した箇所
Javascript
1 // for each question... 2 myQuestions.forEach( 3 (currentQuestion, questionNumber) => { 4 5 // we'll want to store the list of answer choices 6 const answers = []; 7
自分なりの対策
何度も見直しました。