【发布时间】：2017-03-15 15:28:38
【问题描述】：
我在纯 JavaScript 中进行了广泛搜索，但没有任何答案。我正在构建一个带有动态显示问题和单选按钮选项的测验应用程序。
我不知道如何链接代码。我想确保用户选择了一个选项，如果他们选择了，那么单击下一步按钮将在数组中显示下一个问题并存储答案。
我已经在我认为代码需要去的地方发出警报。
谢谢
//store all the questions in an array
var allQuestions = [{
question: "How many legs does a spider have?",
choices: [6, 4, 8],
correctAnswer:8},
{
question: "how many legs does a cat have?",
choices: [2, 4, 6],
correctAnswer:4},
{
question: "how many legs do you have?",
choices: [2, 4, 6],
correctAnswer:2
}];
var container = document.getElementById('container')
var content = document.getElementById('content');
var questions = document.getElementById('questions');
var choicesContainer = document.getElementById("choices");
var scoreContainer = document.getElementById('score');
var sumitButton = document.getElementById('next');
var questionHeading = document.getElementById("h2");
var nextButton = document.getElementById("next"); // next button
var i = 0;
//start of quiz
var currentQuestion = 0;
var score = 0;
var questionAsked = true;
// loop through choices, and create radio buttons
// function to askQuestion
showChoices()
function askQuestion () {
var askQuestions = allQuestions[currentQuestion].question;
document.getElementById("question").innerHTML = askQuestions;
}
askQuestion()
// display the iterative choices
function showChoices() {
var displayChoices = allQuestions[currentQuestion].choices;
for (var i = 0; i < displayChoices.length; i++) {
var label = document.createElement('label');
var input = document.createElement('input');
var br = document.createElement('br');
input.setAttribute("id", "Radios");
input.setAttribute('type', 'radio');
input.setAttribute('name', 'answer');
input.setAttribute('value', i);
label.appendChild(input);
label.appendChild(document.createTextNode(displayChoices[i]));
container.append(label);
container.append(br);
}
}
//select next button
(function(){
var myNode = document.querySelector('#next');
myNode.addEventListener("click", function(e) {
if(e.target.tagName === 'BUTTON'){
alert("nextquestion");
}
}, false); // item is clicked
})(); //self executing function
//check if a radio is checked
function buttonChecked () {
var radios = document.getElementsByTagName('answer');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
}
}
}
// function getRadioInfo() {
// //get the users radio button answer
//
// var e = document.getElementById("choices");
// var value = e.options[e.selectedIndex].value;
// var text = e.options[e.selectedIndex].text;
// // store the users answers in a variable <body>
<div id="container">
<div id="content"></div>
<div id="allQuestions"></div>
<div id="question"></div>
<div id="choices"></div>
<div id="score"></div>
</div>
<button id="next">Next</button>
</body>【问题讨论】：
-
在不详细介绍代码的情况下，我会说您需要将 eventListener 添加到单选按钮以更改下一个按钮的显示状态。或者您可以将 eventListener 添加到他们的容器中，然后单击检查是否检查了任何子项，如果是，则显示下一个按钮。
-
也许您不会使用 MVVM 框架（如果您选择使用 MVVM 框架会很容易）。使用您拥有的代码，您需要为这些单选按钮和您当前的问题对象（可能是某种甚至是侦听器）编写一些绑定。然后当你点击 NEXT 时，检查当前的问题对象，看看它是否已经被回答，然后进行相应的操作。 （嗯，我不确定这是你想要的还是别的）
-
感谢您的浏览。完全错过了我没有向按钮添加事件侦听器。
标签： javascript arrays