如何解决如何显示调查的答案选择？
因此，我已经为我的网站编写了调查表/调查表，但是由于某些原因，当用户单击开始调查表时，问题会显示出来，但选择不会显示。我真的很困惑为什么不能正常工作，如果有人可以帮助我解决我的问题，我将非常感谢！
这是我所认为的IDE的链接，通过它可以更容易地识别出我正在犯的任何错误：https://repl.it/@AS11RA/Forest-Firefighters-Website#index.html
这是开始的问卷表.js文件：
function buttonClicked(button) {
button.style.visibility = "hidden";
startSurvey();
console.log("Survey started.");
}
function startSurvey() {
var i;
var j;
var k;
for (i = 0; i < ourQuestions.length; i++) {
document.getElementById("questions").innerHTML += '<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;
for (j = 0; j < ourQuestions[i].answers.length; j++) {
document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="' + ourQuestions[i].answers[j] + '" id="value4" type="checkbox" />' + ourQuestions[i].answers[j] + '<br/>';
}
document.getElementById("questions").innerHTML += '</form><br/><br/>';
}
document.getElementById("questions").innerHTML += '<button class="button" onclick="solveQuiz()">Solve Quiz</button>';
}
var ourQuestions = [{
question: 'While naturally occurring wildfires can benefit ecosystems,unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',answers: {
a: '10-15%',b: '85-90%',c: '45-50%',d: '25-30%'
},correctAnswer: 'b'
},{
question: 'If you have lit a campfire before,how did you extinguish it?',answers: {
a: 'I did not extinguish it and waited for it to die on its own',b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',c: 'I have never lit a campfire before.',d: 'uhhh'
},{
question: 'What are the two most common reasons that forest fires start?',answers: {
a: 'Lightning and human negligence',b: 'Spontaneous combustion and erosion',c: 'Animals igniting flames and overcrowded bushlands',d: 'Strong Wind Patterns'
},correctAnswer: 'a'
},{
question: 'What time of the year do most forest fires occur?',answers: {
a: 'Summer',b: 'Spring',c: 'Fall',d: 'Winter'
},{
question: 'How fast do you think forest fires spread?',answers: {
a: '10.8 km/h',b: '6.4 km/h',c: '22.2 km/h',d: '3.2 km/h'
},{
question: 'What do forest fires need in order to burn?',answers: {
a: 'Water',b: 'High humidity',c: 'Fuel',d: 'Clear weather'
},correctAnswer: 'c'
},{
question: 'What is one of the main toxic gases present in forest fire smoke?',answers: {
a: 'Osmium tetroxide',b: 'Disulfur decafluoride',c: 'Tungsten hexafluoride ',d: 'carbon monoxide'
},correctAnswer: 'd'
},{
question: 'What natural disasters could be caused as a consequence of a destructive forest fire?',answers: {
a: 'Erosion,flash flooding and landslides',b: 'Tornadoes',c: 'Snow',d: 'Tsunami and earthquakes'
},{
question: 'What major factor determines a forest fire’s behaviour?',answers: {
a: 'Amount of water vapour in air',b: 'Density of Forests',c: 'Wind',d: 'Hours of sunlight'
},{
question: 'What 3 things are needed to start a fire?',answers: {
a: 'Matches,oxygen,wood',b: 'Air and sunlight',c: 'Fuel,heat,oxygen',d: 'Fuel,wood'
},{
question: 'Which one of these is NOT a type of forest fire?',answers: {
a: 'Crown',b: 'Firework',c: 'Surface',d: 'Ground '
},{
question: 'What was the cause of the Amazon forest fires in 2019?',answers: {
a: 'Deforestation for agriculture usage',b: 'Fireworks',c: 'Unattended campfire',d: 'Arson'
},{
question: 'Which one of these names are NOT an alternate name for forest fires?',answers: {
a: 'Wildfires',b: 'Shrub fires',c: 'Natural fireworks',d: 'Brushfires '
},{
question: 'How many forest fires occurred in 2019?',answers: {
a: '25 653',b: '50 477',c: '45 809',d: '89 431'
},correctAnswer: 'b'
}
];
function solveSurvey() {
var x;
var txt = ' ';
var i = 0;
var correct = 0;
for (i = 0; i < document.forms.length; i++) {
x = document.forms[i];
for (j = 0; j < x.length; j++) {
if (x[j].checked) {
correctAnswer = ourQuestions[i].correctAnswer;
if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
correct += 1;
}
}
}
document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="' + ourQuestions[i].answers[j] + '" id="value4" type="radio" />' + ourQuestions[i].answers[j] + '<br/>';
}
document.getElementById("questions").innerHTML += 'Correct answers: ' + correct;
}
这是问卷。HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Forest Firefighters: Questionnaire</title>
<link href="survey style.css" rel="stylesheet" type="text/css" />
<link href="main style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script src="start questionnaire.js" type="text/javascript"></script>
</head>
<body>
<!--────────────────Header───────────────-->
<header>
<nav>
<ul class="nav-bar"><div class="bg"></div>
<li><a class="nav-link" href="about.html">About</a></li>
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link active" href="questionnaire.html">Questionnaire</a></li>
<li><a class="nav-link" href="learning more.html">Learning more</a></li>
<li><a class="nav-link" href="">Ways you can help</a></li>
</ul>
</nav>
</header>
<main>
<!--─────────────────Home────────────────-->
<div id="home">
<div class="filter"></div>
<!--────questionnaire button─────-->
<button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>
<spacer></spacer>
<div id="questions"></div>
<spacer></spacer>
<spacer></spacer>
</div>
<div class="citing">
<a class="citing-link" href=questionnaire.html">Image Source: https://phys.org/news/2019-11-countries-forest.html</a>
<div>
</main>
<!--─────────────────Footer────────────────-->
<footer class="copyright">© 2020 Amber,Aatiqah,Selina</footer>
</body>
</html>
解决方法
之所以不显示答案，是因为您试图像数组一样遍历所有答案。但是，答案是一个对象，而不是数组，因此您不能真正做诸如使用Answers.length属性等之类的事情。
但是，除了将您的答案转换成数组之外，实际上还有一种更简单的方法来处理这个问题。也就是说，对ourQueuestions.answers对象上的 object.entries 使用 for ... of 循环。通过使用Object.entries（ourQuestions.answers）方法，您将能够检索“键”和“值”对中的答案，并轻松地在循环中使用它们，而无需使用经典的for循环以及i和j变量等。>
此外，您在下面的代码块中引用了resolveQuiz（）方法，但是，在您的代码中，该方法的名称实际上是resolveSurvey（）而不是resolveQuiz（）。因此，我也在以下代码中进行了更改：
document.getElementById('questions').innerHTML +=
'<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}
最后，我建议您阅读MDN文档中的ES6功能，例如 for ... of 循环和字符串常量之类的东西。早在2015年开始使用Javascript，作为使用JS的开发人员，它们将使您的生活变得更轻松：）
祝你好运！您可以直接使用下面的代码，并查看它是否还成功在UI上显示了答案。
function buttonClicked(button) {
button.style.visibility = 'hidden';
startSurvey();
console.log('Survey started.');
}
function startSurvey() {
var i;
var j;
var k;
for (i = 0; i < ourQuestions.length; i++) {
document.getElementById('questions').innerHTML +=
'<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;
debugger;
for (let [key,value] of Object.entries(ourQuestions[i].answers)) {
document.forms[i].innerHTML +=
'</div><div class="answer"><input name="q1" value="' +
value +
'" id="value4" type="checkbox" />' +
`${key}: '${value}'`; //use a string literal,makes a dev's life very easy
('<br/>');
}
document.getElementById('questions').innerHTML += '</form><br/><br/>';
}
document.getElementById('questions').innerHTML +=
'<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}
var ourQuestions = [
{
question:
'While naturally occurring wildfires can benefit ecosystems,unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',answers: {
a: '10-15%',b: '85-90%',c: '45-50%',d: '25-30%',},correctAnswer: 'b',{
question: 'If you have lit a campfire before,how did you extinguish it?',answers: {
a: 'I did not extinguish it and waited for it to die on its own',b:
'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',c: 'I have never lit a campfire before.',d: 'uhhh',{
question: 'What are the two most common reasons that forest fires start?',answers: {
a: 'Lightning and human negligence',b: 'Spontaneous combustion and erosion',c: 'Animals igniting flames and overcrowded bushlands',d: 'Strong Wind Patterns',correctAnswer: 'a',{
question: 'What time of the year do most forest fires occur?',answers: {
a: 'Summer',b: 'Spring',c: 'Fall',d: 'Winter',{
question: 'How fast do you think forest fires spread?',answers: {
a: '10.8 km/h',b: '6.4 km/h',c: '22.2 km/h',d: '3.2 km/h',{
question: 'What do forest fires need in order to burn?',answers: {
a: 'Water',b: 'High humidity',c: 'Fuel',d: 'Clear weather',correctAnswer: 'c',{
question:
'What is one of the main toxic gases present in forest fire smoke?',answers: {
a: 'Osmium tetroxide',b: 'Disulfur decafluoride',c: 'Tungsten hexafluoride ',d: 'carbon monoxide',correctAnswer: 'd',{
question:
'What natural disasters could be caused as a consequence of a destructive forest fire?',answers: {
a: 'Erosion,flash flooding and landslides',b: 'Tornadoes',c: 'Snow',d: 'Tsunami and earthquakes',{
question: 'What major factor determines a forest fire’s behaviour?',answers: {
a: 'Amount of water vapour in air',b: 'Density of Forests',c: 'Wind',d: 'Hours of sunlight',{
question: 'What 3 things are needed to start a fire?',answers: {
a: 'Matches,oxygen,wood',b: 'Air and sunlight',c: 'Fuel,heat,oxygen',d: 'Fuel,{
question: 'Which one of these is NOT a type of forest fire?',answers: {
a: 'Crown',b: 'Firework',c: 'Surface',d: 'Ground ',{
question: 'What was the cause of the Amazon forest fires in 2019?',answers: {
a: 'Deforestation for agriculture usage',b: 'Fireworks',c: 'Unattended campfire',d: 'Arson',{
question:
'Which one of these names are NOT an alternate name for forest fires?',answers: {
a: 'Wildfires',b: 'Shrub fires',c: 'Natural fireworks',d: 'Brushfires ',{
question: 'How many forest fires occurred in 2019?',answers: {
a: '25 653',b: '50 477',c: '45 809',d: '89 431',];
function solveSurvey() {
var x;
var txt = ' ';
var i = 0;
var correct = 0;
for (i = 0; i < document.forms.length; i++) {
x = document.forms[i];
for (j = 0; j < x.length; j++) {
if (x[j].checked) {
correctAnswer = ourQuestions[i].correctAnswer;
if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
correct += 1;
}
}
}
document.forms[i].innerHTML +=
'</div><div class="answer"><input name="q1" value="' +
ourQuestions[i].answers[j] +
'" id="value4" type="radio" />' +
ourQuestions[i].answers[j] +
'<br/>';
}
document.getElementById('questions').innerHTML +=
'Correct answers: ' + correct;
}
我在jsfiddle上运行它，并收到以下错误：
“ ReferenceError：未定义buttonClicked”
我相信您的代码中存在一些格式问题。 我在页面上将您的按钮上移，它开始起作用。查看小提琴。
<body >
<button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>
除了buttonClick函数之外，我还删除了您的JavaScript。
您需要在其中添加代码，直到它起作用为止。
这是显示您的问题的经过编辑的小提琴：
https://jsfiddle.net/raddevus/jbec837y/10/
,在我们的问题中，您将答案创建为如下对象
answers: {
a: '10-15%',d: '25-30%'
}
但是在代码中，您试图获取它的长度
for (j = 0; j < ourQuestions[i].answers.length; j++)
尝试将其更改为数组，并且应该更改逻辑以获得正确答案 还有一件事，您使用复选框选择了答案，而是应该使用广播组，因为您只有一个正确的答案
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。