En essayant de créer un simple Choix Multiples jeu

Ma fonction qui répertorie les questions et les choix de ne pas travailler. Je reçois le code d'erreur document.getElementById(...) a la valeur null ou n'est pas un objet. La syntaxe semble correct.

Je veux les questions et les choix apparaissent pas dans le même divs. Je ne veux pas énumérer toutes mes questions à la fois. Lorsque l'utilisateur répond à une question, ils ont ensuite passer à la prochaine question qui apparaîtra exactement de la même divs que la première question jusqu'à ce que toutes les questions ont été vus. 

<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>
  • Avez-vous des HTML pour aller avec qui? Vous devriez avoir au moins quatre <div> éléments sur la page quelque part avec des valeurs d'id; myDiv1, myDiv2, myDiv3, myDiv4.
  • Salut Dave, je ne. Voir ci-dessous. <body> <div id="myDiv1"></div> <div id="myDiv2"></div> <div id="myDiv3"></div> <div id="myDiv4"></div> </body>
  • pouvez-vous ajouter votre source pour la question, de sorte que nous pouvons recréer votre erreur. Il ne peut pas trouver votre élément et que vous essayez d'accéder à la propriété innerHTML d'un objet null.
InformationsquelleAutor Hoshang Chenoy | 2013-01-09
  1. 1

    Voici le code complet:

    <!DOCTYPE html>
<html>
<head>
<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>';
var choicesOutput=[];//new Array()
for (var k=0; k<choices[i].length; k++){
choicesOutput.push(
'<p><input type = "radio" name ='
+' "questionchoice">'+choices[i][k]+'</p>');
}
document.getElementById("myDiv2").innerHTML =choicesOutput.join("");
document.getElementById("myDiv3").innerHTML = 
'<p><button onClick = "getRadioValue()">Check</button></p> <br>';
}
};
var getRadioValue = function(){
var value = '';
for (var h = 0; 
h < document.getElementsByName('questionchoice').length; h++){
if (document.getElementsByName('questionchoice')[h]
.checked==true){
value = document.getElementsByName('questionchoice')[h].value;
score++;
}
}
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()'> N"
+"ext Question</button>"; 
}
i++;
};
var whatIsScore = function(){
return score; 
};
function loadContent(){
document.getElementById("myDiv4").innerHTML="";
listQuestion();
}
window.onload = listQuestion;
</script>
</head>
<body>
<div id="myDiv1"></div> 
<div id="myDiv2"></div>
<div id="myDiv3"></div>
<div id="myDiv4"></div>
</body>
</html>
    • Toujours ce Message d'erreur: 'document.getElementById(...)' a la valeur null ou n'est pas un objet
    • si vous affichez la page entière, je peux le vérifier pour vous. Si l'erreur est déclenchée sur la ligne de tenter d'obtenir myDiv3 par son id et que l'élément n'existe pas ou n'a pas les id (sensible à la casse) que vous obtiendrez une erreur. Je vois que j'ai utilisé la mauvaise ID pour les réponses, j'ai utilisé myDiv3 au lieu de myDiv2. va le corriger
    • Salut HMR, j'ai mis tout le code ci-dessus. Lorsque j'ai utilisé votre code, j'ai eu le même message d'erreur (ci-dessus), j'ai donc décidé de poster mon code d'origine. Toute aide que vous pouvez fournir serait grandement apprécié. Merci.
    • Salut les gars, un peu de chance avec ça? Je suis perplexe.
    • de la fenêtre.onload=listQuestion() doit être: de la fenêtre.onload=listQuestion.
    InformationsquelleAutor HMR