My function that lists the question and choices won't work. I keep getting the error code 'document.getElementById(...)' is null or not an object. The syntax appears to be correct.
I want the questions and choices to appear in the same divs. I do not want to list all my questions at once. When the user completes a question, they then move on to the next question which will appear in exactly the same divs as the first question until all the questions have been seen.
HTML Code:<script> var questions = new Array(); questions[0] = 'Is there a difference between a jungle and a rain forest?' questions[1] = 'What is the world\'s most common religion?', questions[2] = 'What is the second largest country (in size) in the world?'; var choices = new Array(); choices[0] = ['No difference', 'Some difference', 'Completely different'], choices[1] = ['Christianity', 'Buddhism', 'Hinduism', 'Islam'], choices[2] = ['USA', 'China', 'Canada', 'Russia']; var answers = new Array(); answers[0] = ['Some difference'], answers[1] = ['Christianity'], answers[2] = ['Canada']; var score = 0; i= 0; var listQuestion = function(){ if(i<questions.length){ document.getElementById("myDiv1").innerHTML = '<p>'+questions[i]+'</p>'; for (k=0; k<choices[i].length; k++){ document.getElementById("myDiv2").innerHTML ='<p><input type = "radio" name = "questionchoice">'+choices[i][k]+'</p>'; } document.getElementById("myDiv3").innerHTML = '<p><button onClick = "getRadioValue()">Check</button></p> <br>'; }; }; var getRadioValue = function() { for (var h = 0; h < document.getElementsByName('questionchoice').length; h++) { var value = ''; if (document.getElementsByName('questionchoice')[h].checked==true) { value = document.getElementsByName('questionchoice')[h].value; score+=1 } } if (value== answers[i]){ document.getElementById("myDiv4").innerHTML ="That is correct. </br><button input type = 'submit' onClick = 'loadContent()'> Next Question</button>"; } else { document.getElementById("myDiv4").innerHTML ="That is incorrect. </br><button input type = 'submit' onClick = 'loadContent()'> Next Question</button>"; } i++; }; var whatIsScore = function(){ return score; } window.onload = listQuestion(); </script> </head> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> <div id="myDiv3"></div> <div id="myDiv4"></div> </body>
Reply With Quote
Bookmarks