javascriptで、1問ずつ問題が表示されるプログラムを作っています。このプログラムのブラウザ画面に、セレクトボックス(1~4の整数が選べるように)を追加して、ユーザーが指定した問題番号の問題を表示させたいと思っています。
具体的には、ブラウザ画面から 以下のコードの currentNum の番号をセレクトボックスの操作により変更できるようにしたいです。
以下のように作ってみたのですが、セレクトボックスを操作しても問題が変わりません。対応を教えていただけないでしょうか?
javascript
1 2(function() { 3 'use strict'; 4 5 var question = document.getElementById('question'); 6 var btn = document.getElementById('btn'); 7 var answers = document.querySelectorAll('#answers > li'); 8 9 10 var quizSet = [ 11 {q: 'What is A?', a: ['A0', 'A1', 'A2']}, 12 {q: 'What is B?', a: ['B0', 'B1', 'B2']}, 13 {q: 'What is C?', a: ['C0', 'C1', 'C2']} 14 ]; 15 16 var currentNum = 0; 17 18 19 function setQuiz() { 20・ 21・ 22・ 23 } 24 25 function setEvents() { 26 var i; 27 for (i = 0; i < answers.length; i++) { 28 answers[i].addEventListener('click', function() { 29 checkAnswer(this); 30 }); 31 } 32 } 33 34 function checkAnswer(node) { 35・ 36・ 37・ 38 } 39 } 40 41 setQuiz(); 42 setEvents(); 43 44})(); 45
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Quiz</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <div id="question"></div> <ul id="answers"> <li></li> <li></li> <li></li> <li></li> </ul> <div id="btn" class="disabled">Next</div> <div id='kaitou'></div> <div id='kaisetu'></div> <p>選択した番号 <span id="sp1"></span></p> <form name="form1"> <select name="color1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </form> <br/> <input type="button" value="問題選択" onclick="btn1_click()"/> </div> <script src="js/main.js"></script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/13 13:25
2018/08/13 14:00 編集
2018/08/13 14:34