尝试创建一个简单的多项选择游戏
Posted
技术标签:
【中文标题】尝试创建一个简单的多项选择游戏【英文标题】：Trying to create a simple Multiple Choice game 【发布时间】：2012-12-23 00:57:55 【问题描述】：我列出问题和选项的功能不起作用。我不断收到错误代码document.getElementById(...) 为空或不是对象。语法似乎是正确的。
我希望问题和选择出现在同一个 div 中。我不想一次列出我所有的问题。当用户完成一个问题时，他们会继续下一个问题，该问题将出现在与第一个问题完全相同的 div 中，直到所有问题都被看到。
<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>
【问题讨论】：
你有任何 HTML 来配合它吗？您应该在页面上的某个位置至少有四个<div> 元素具有 id 值； myDiv1，myDiv2，myDiv3，myDiv4。
嗨，戴夫，我愿意。见下文。
您能否将您的完整来源添加到问题中，以便我们重新创建您的错误。它找不到您的元素，而您正试图访问 null 对象的 innerHTML 属性。
【参考方案1】：
这里是完整的代码：
<!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>
【讨论】：
仍然收到此错误消息：'document.getElementById(...)' is null or not an object 如果您发布完整的页面，我可以为您查看。如果错误是在尝试通过其 id 获取 myDiv3 的行上触发的，并且该元素不存在或没有 id（区分大小写），那么您将收到此类错误。我看到我使用了错误的 ID 作为答案，我使用了 myDiv3 而不是 myDiv2。会改正的 嗨 HMR，我已经发布了上面的所有代码。当我使用你的代码时，我得到了同样的错误信息（上面列出的），所以我决定发布我的原始代码。您可以提供的任何帮助将不胜感激。谢谢。 大家好，你好运吗？我被难住了。 window.onload=listQuestion() 应该是：window.onload=listQuestion.以上是关于尝试创建一个简单的多项选择游戏的主要内容，如果未能解决你的问题，请参考以下文章