Matching radio button selection with nested Array content in Javascript -

update 6-25-2014

any insight appreciated!

update 6-21-2014

i tried make radio variables, global 'if block' in 'answerfwd' function compared correctanswer array, didn't work!

update 6-16-2014 added js fiddle

i building quiz , creating array of radio buttons dynamically, , match selected button correct answer have established in question array.

html

<div id="responses">  <input type="radio" name="choices" class="radiobuttons" value="0" id="choice0">  <div id="c0" class="choicetext">the observers</div>  <input type="radio" name="choices" class="radiobuttons" value="1" id="choice1">  <div id="c1" class="choicetext">the watchers </div>  <input type="radio" name="choices" class="radiobuttons" value="2" id="choice2">  <div id="c2" class="choicetext">the sentinels</div>  <input type="radio" name="choices" class="radiobuttons" value="3" id="choice3">  <div id="c3" class="choicetext">the oa</div> </div> 

questions:

var allquestions = [{ "question": "who luke's wingman in battle @ hoth?", "choices": ["dak", "biggs", "wedge", "fx-7"], "correctanswer": 0 }, { "question": "what name of darth vader's flag ship?", "choices": ["the avenger", "devastator ", "conquest", "the executor"], "correctanswer": 3 },{},{} //other questions];   var item = allquestions[0];  var currentquestion = 0;  var playersscore = 0; 

//function creates buttons

 function createradiobuttonfromarray(array) {   var len = array.length;   var responses = document.getelementbyid("responses");    responses.innerhtml = '';   (var = 0; < len; i++) {     radio = document.createelement("input"); //updated 6-21-2014 removed 'var'     radio.type = "radio";     radio.name = "choices";     radio.classname = "radiobuttons";     radio.value = i;     radio.id = "choice" + i;     ar radiotext = document.createelement("div");     radiotext.id = "c" + i;     radiotext.classname = "choicetext";     radiotext.innerhtml = array[i];      responses.appendchild(radio);     responses.appendchild(radiotext);   } }  function answerfwd() {    var answeroutput = " ";    var itemanswers = allquestions;     var playertally = 0; //updated 6-9-2014    var playerfeedback = " "; //updated 6-9-2014    var playermessage = document.getelementbyid("playermessage"); //updated 6-9-2014     if (currentanswer <= itemanswers.length) {        currentanswer++;    }     createradiobuttonfromarray(itemanswers[currentquestion].choices);  

* updated 6-9-2014 stumped; doesn't work encouraged got score tally on page! comparing elements correctly? updated 6-21-2014 reversed gain, had tally render on screen*

   if (itemanswers.correctanswer === responses.id) { //updated 6-21-2014     playertally += 1;     playerfeedback += "<h5>" + playertally + "</h5> <br/>";     playermessage.innerhtml = playerfeedback;    }  } 

at first tried debug had trouble finding error coming from.

one thing noticed currentanswer variable being set once. (when declared)

another thing make cleaner storing each response each question property of questions object.

for example: {"question": "what registry of starship reliant?","choices": ["nx-01", "ncc-1864", "ncc-1701", "ncc-2000"],"correctanswer": 1,"selectedanswer": 0}

---

this example of why may want use object oriented programming. can keep global namespace clean, while having tighter control on variables.

i put quiz code using object oriented principles:

javascript

var quiz = function(questions) {     this.questions = questions;      this.$template = {         "header": document.queryselector(".question"),         "options": document.queryselector(".question-choices")     };      this.init(); }  quiz.prototype = {     "init": function() {         this.question = 0;          this.generatequestion();         this.bindevents();     },     //gets called when this.question == this.questions.length, calculates score percentage , alerts     "score": function() {         var correctcount = 0;          this.questions.foreach(function(question){             if ( (question.selectedanswer || -1) === question.correctanswer ) correctcount += 1         })          alert("score: " + ((correctcount / this.questions.length) * 100) + "%")     },     //gets called during initialization, , after nav button pressed, loads question , shows choices     "generatequestion": function() {         var question = this.questions[this.question];          this.$template.header.innerhtml = question.question;         this.$template.options.innerhtml = "";         question.choices.foreach(this.createradio.bind(this));     },     //binds previous, , next event handlers, navigate through questions     "bindevents": function() {         var _this = this,             $nextbtn = document.queryselector(".question-navigation--next"),             $prevbtn = document.queryselector(".question-navigation--prev");          $nextbtn.addeventlistener("click", function(e) {             //go next question             _this.question++;              if ( _this.question == _this.questions.length ) {                 _this.score();             } else {                 _this.generatequestion();             }         });          $prevbtn.addeventlistener("click", function(e) {             _this.question--;              if ( _this.question <= 0 ) _this.question = 0              _this.generatequestion();         });     },     //create each individual radio button, callback in foreach loop     "createradio": function(choice, index) {         var question = this.questions[this.question];          var radio = document.createelement("input");         radio.type = "radio";         radio.name = "options";         radio.id = "option-"+index;          if ( question.selectedanswer === index ) {             radio.checked = true;         }          radio.addeventlistener("click", function(e) {             question.selectedanswer = index;         })          var radiotext = document.createelement("label");         radiotext.setattribute("for", "option-"+index)         radiotext.innerhtml = choice;          radiotext.insertbefore(radio, radiotext.firstchild);         this.$template.options.appendchild(radiotext);     } }  var q = new quiz(allquestions)