Having trouble looping through an array of objects with 'back' and 'next' buttons? It seems that the loop is not functioning correctly. The aim is for the 'back' button to decrement based on the number of times the 'next' button is pressed.
Check out the function that controls the back button navigation through sets of radio questions. For the complete code, please visit my JS Fiddle. Thank you!
var questions = {
allQuestions: [
{
topQuestion: [" 1a) Click on which music producer, produced Justins Timberlake 4th Album?", "2a)Click on which famous celebrity did Justin Timberlake date in 1999? ", "3a)Click on which social media movie did Justin Timberlake starred in?", "4a)Click on what famous disney kids show did first Justin Timberlake made his first appearance?", "5a)Click on which famous singer did Justin Timberlake accidently tear clothes off during a performance?", "6a)What magazine named Justin Timberlake the Most Stylish Man In America?"],
question: "1a)What popular site did Justin Timberlake invest 2.2 Million Dollars in? ",
choices: ["Linkedin", "Facebook", "Myspace", "Youtube"],
}, {
question: "2b)Select which movie did Justin Timberlake film score in 2008?",
choices: ["The Incredibles", "Shark Tank", "Finding Memo", "Star Wars"],
correctAnswer: 1
}, {
question: "3b)What city was Justin Timberlake born in?",
choices: ["Chicago", "Detroit", "Tenessee", "New York"],
correctAnswer: 2
}, {
]
};
var newQues = Object.create(questions);
var k = 0;
var chngeRadio = 0;
for (var i = 0; i < 4; i++) {
container = document.getElementById("container");
list = document.getElementById("list");
var li = document.createElement("input");
li.type = 'radio';
li.name = 'radio_group';
li.id = 'id1';
li.value = newQues.allQuestions[i].correctAnswer;
list.style.textAlign = "center";
document.body.appendChild(li);
div = document.createElement("div");
text = document.createTextNode(newQues.allQuestions[0].choices[i]);
list.appendChild(div);
div.appendChild(li);
div.appendChild(text);
}
btn1.onclick = function (event) {
event = EventUtil.getEvent(event);
k++;
while (list.firstChild) {
list.removeChild(list.firstChild);
};
for (var m = 0; m < 4; m++) {
container = document.getElementById("container");
list = document.getElementById("list");
var li = document.createElement("input");
li.type = 'radio';
li.name = 'radio_group';
li.id = 'id1';
li.value = newQues.allQuestions[m].correctAnswer;
list.style.textAlign = "center";
div = document.createElement("div");
text = document.createTextNode(newQues.allQuestions[k].choices[m])
//alert(k);
list.appendChild(div);
div.appendChild(li);
div.appendChild(text);
};
// The event object is assigned to the back button, aiming to loop through the radio questions backward, but currently only decrements once
if ( k >= 1) {
btn2.onclick = function(event){
event = EventUtil.getEvent(event);
chngeRadio++;
function replaceNode() {
function replaceNode() {
if (k === 1) {
//resets count to 0
chngeRadio -= 1;
};
if (k === 2) {
//resets count to 1
chngeRadio = 2;
chngeRadio -= 1;
};
};
replaceNode()
while (list.firstChild) {
list.removeChild(list.firstChild);
};
for (var d = 0; d < 4; d++) {
container = document.getElementById("container");
list = document.getElementById("list");
var li2 = document.createElement("input");
li2.type = 'radio';
li2.name = 'radio_group';
li2.id = 'id2';
li2.value = newQues.allQuestions[d].correctAnswer;
li2.style.textAlign = "center";
div2 = document.createElement("div");
text2 = document.createTextNode(newQues.allQuestions[chngeRadio].choices[d])
//alert(k);
list.appendChild(div2);
div2.appendChild(li2);
div2.appendChild(text2);
};
};
};
};