前提・実現したいこと
JavaScriptを使ったプログラム
liの入力情報をそれぞれの項目で取得できるか?
このプログラムで考える場合に気を付ける点はどこになるでしょうか?
該当のソースコード
HTML
1 <div class ="container2"> 2 <p id="question"></p> 3 <ul id="choices"></ul> 4 <div id="btn" class="disabled">Next</div> 5 </div>
JavaScript
1'use strict'; 2 3{ 4 const question = document.getElementById('question'); 5 const btn = document.getElementById('btn'); 6 const choices = document.getElementById('choices'); 7 8 const quizSet = [ 9 {q: 'What is A?', c: ['あてはまる', 'どちらかというとあてはまる', 'どちらかというとあてはまらない','あてはまらない']}, 10 {q: 'What is B?', c: ['あてはまる', 'どちらかというとあてはまる', 'どちらかというとあてはまらない','あてはまらない']}, 11 {q: 'What is C?', c: ['あてはまる', 'どちらかというとあてはまる', 'どちらかというとあてはまらない','あてはまらない']}, 12 ]; 13 let currentNum = 0; 14 let isAnswered; 15 16 function checkAnswer(li) { 17 if(isAnswered){ 18 var targetElements = document.getElementsByClassName('correct'); 19 [].forEach.call(targetElements, function(elem) { 20 elem.classList.remove('correct'); 21 }) 22 } 23 isAnswered = true; 24 li.classList.add('correct'); 25 btn.classList.remove('disabled'); 26 } 27 28 function setQuiz() { 29 isAnswered = false; 30 31 question.textContent = quizSet[currentNum].q; 32 while (choices.firstChild) { 33 choices.removeChild(choices.firstChild); 34 } 35 36 quizSet[currentNum].c.forEach(choice =>{ 37 const li = document.createElement('li'); 38 li.textContent = choice; 39 li.addEventListener('click', () => { 40 checkAnswer(li); 41 }); 42 choices.appendChild(li); 43 }); 44 45 if (currentNum === quizSet.length - 1) { 46 btn.textContent = '診断結果'; 47 } 48 } 49 50 setQuiz(); 51 52 btn.addEventListener('click', () => { 53 if(btn.classList.contains('disabled')){ 54 return; 55 } 56 btn.classList.add('disabled'); 57 58if(currentNum === quizSet.length - 1){ 59 60}else { 61 currentNum++; 62 setQuiz(); 63} 64 }); 65} 66
試したこと
>JavaScriptを使ったプログラム
要件が何もありません。
プログラミングの本質は問題解決です。
要件や仕様があって、はじめて1つのものが出来上がります。
要件や仕様を何も提示していないのに「このプログラムで考える場合に」とだけ書かれても
「そのプログラムって何よ?」という疑問しか出ないので、あなたが欲しいアドバイスは得られないでしょう。
質問テンプレートを利用して再編してください。
回答2件
あなたの回答
tips
プレビュー