前提・実現したいこと
四択の問題を連続で出そうとしているのですがエラーや、ボタンが反応しなかったり、問題と選択肢が違ったり問題数が足りなかったりして出来ません。なぜか二つ目のプログラムで二問目の問題文が違うけれど第二門として出てきたので載せました。
発生している問題・エラーメッセージ
エラーメッセージ ```![イメージ説明](1d9743c1fda0fac9ca8956f80b389651.png) ![イメージ説明](9938285db59fad7ca8d44836039c955d.png) ### 該当のソースコード ```javascript const quiz = [ { question: 'ゲーム史上、最も売れたゲーム機は次のうちどれ?', answers: [ 'スーパーファミコン', 'プレイステーション', 'ニンテンドースイッチ', 'ニンテンドーDS' ], correct:'ニンテンドーDS' }, { question: '糸井重里が企画に関わった、任天堂の看板ゲームといえば?', answers: [ 'MOTHER2', 'スーパーマリオブラザーズ3', 'スーパードンキーコング', '星のカービィ' ], correct:'MOTHER2' }, { question: 'ファイナルファンタジーⅣの主人公の名前は?', answers: [ 'フリオニール', 'クラウド', 'ティーダ', 'セシル' ], correct:'セシル' } ]; const quizLength = quiz.length; let quizIndex = 0; let buttonIndex,buttonLength setupQuiz = () => { const button = document.getElementsByTagName('button') document.getElementById('js-question').textContent = quiz[quizIndex].question; let buttonIndex = 0; let buttonLength = button.length; while(buttonIndex < buttonLength) { button[buttonIndex].textContent = answers[buttonIndex]; buttonIndex++; } } setupQuiz(); document.addEventListener('click', event => { if (event.target.tagName == 'BUTTON') { if (correct === event.target.textContent){ window.alert('正解!'); } else { window.alert('不正解!'); } quizIndex++ }; if(quizIndex < quizLength){ //問題数がまだあればこちらを実行 setupQuiz(); }else{ //問題数がもうなければこちらを実行 window.alert('終了!'); }; })
JavaScript
1const quiz = [ 2 { 3 question: 'ゲーム史上、最も売れたゲーム機は次のうちどれ?', 4 answers: [ 5 'スーパーファミコン', 6 'プレイステーション', 7 'ニンテンドースイッチ', 8 'ニンテンドーDS' 9 ], 10correct:'ニンテンドーDS' 11}, { 12 question: '糸井重里が企画に関わった、任天堂の看板ゲームといえば?', 13 answers: [ 14 'MOTHER2', 15 'スーパーマリオブラザーズ3', 16 'スーパードンキーコング', 17 '星のカービィ' 18 ], 19 correct:'MOTHER2' 20}, { 21 question: 'ファイナルファンタジーⅣの主人公の名前は?', 22 answers: [ 23 'フリオニール', 24 'クラウド', 25 'ティーダ', 26 'セシル' 27], 28correct:'セシル' 29} 30]; 31 32const quizLength = quiz.length; 33let quizIndex = 0; 34 35const question = 'ゲーム史上、最も売れたゲーム機は次のうちどれ?'; 36const answers = [ 37'スーパーファミコン', 38'プレイステーション', 39'ニンテンドースイッチ', 40'ニンテンドーDS' 41] 42const correct = 'ニンテンドーDS'; 43let buttonIndex,buttonLength 44console.log(document.getElementById('js-question').textContent = question); 45const button = document.getElementsByTagName('button') 46button[0].textContent = answers[0]; 47button[1].textContent = answers[1]; 48button[2].textContent = answers[2]; 49button[3].textContent = answers[3]; 50 51setupQuiz = () => { 52console.log(document.getElementById('js-question').textContent = quiz[quizIndex].question); 53 document.getElementById('js-question').textContent = question; 54 let buttonIndex = 0; 55 let buttonLength = button.length; 56 while(buttonIndex < buttonLength) { 57 button[buttonIndex].textContent = answers[buttonIndex]; 58 buttonIndex++; 59 } 60 61document.addEventListener('click', event => { 62 if (event.target.tagName == 'BUTTON') { 63 if (correct === event.target.textContent){ 64 window.alert('正解!'); 65 66 } else { 67 window.alert('不正解!'); 68 } 69 quizIndex++; 70 }; 71 if(quizIndex < quizLength){ 72 //問題数がまだあればこちらを実行 73 setupQuiz(); 74}else{ 75//問題数がもうなければこちらを実行 76window.alert('終了!'); 77 };})} 78 79 setupQuiz(); 80
試したこと
vscodeでの確認、、色々なコードでの確認、見本動画の見直し
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
ブラウザの開発者ツールのコンソールにエラーが出ているはずです。エラーの内容は問題を理解するのにとてもとても重要なので、必ず質問文に含めてください。
回答1件
あなたの回答
tips
プレビュー