How To Loop Through Radio Questions Back Button Javascript

I’m trying to loop through an array of objects with ‘back’ and ‘next’ buttons. For some reason it doesn’t loop properly. When the ‘next’ button is pressed, the ‘back’ button should decrement how every many times more the next button is pressed.

This is the function that is accessing the back button to go back through the sets of radio questions. To see the full code please visit my JS Fiddle. Thanks!

  • How to append something to an array?
  • How to get an array of unique values from an array containing duplicates in JavaScript?
  • Change AJAX jQuery url from checkbox selection
  • How to pass the method defined on prototype to Array.map as callback
  • How to get maximum value from an array of objects to use in d3.scale.linear().domain()
  • How to rearrange an array by indices array?
  •      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);
    
            };
    
    
    
              // Assigns a event object to back button, this is where I would like
              // to go back and loop the radio questions but for some reason it only decrements 1 time
        if ( k >= 1) {
    
            btn2.onclick = function(event){
                event = EventUtil.getEvent(event);
    
                chngeRadio++;
    
    
    
    
                  function replaceNode() {
    
                 function replaceNode() {
    
                 if (k === 1) {
                     //assigns count to 0
                     chngeRadio -= 1;
    
                 };
    
    
                 if (k === 2) {
                     //assigns 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);
    
                };
    
            };
    
        };
    
    
        };
    

  • How to filter Object using Array.prototype.filter?
  • unable to append data properly to a JS array variable
  • Performance - should I use both Arrays and Objects for huge list?
  • Finding Largest Element in an Array using JavaScript
  • declaring javascript array with multiple fields
  • Javascript fastest way to duplicate an Array - slice vs for loop
  • One Solution collect form web for “How To Loop Through Radio Questions Back Button Javascript”

    i’d suggest not to use chngeRadio and replaceNode()function and replace it with k--. Also, change the if condition over Back btn.click to k>1.

    if ( k > 1) {
        btn2.onclick = function (event) {
            event = EventUtil.getEvent(event);
            k--;
    
            while (list.firstChild) {
                list.removeChild(list.firstChild);
            };
    
            for (var d = 0; d < 4; d++) {
                container = document.getElementById("container");
                list = document.getElementById("list");
    

            text2 = document.createTextNode(newQues.allQuestions[k].choices[d]);
            //alert(k);
            list.appendChild(div2);
            div2.appendChild(li2);
            div2.appendChild(text2);
        };
    };