如何显示我的调查的答案选择？

Question

所以我为我的网站编写了一份问卷/调查，但由于某种原因，当用户点击开始问卷时，问题会显示，但选项不会显示。我真的很困惑为什么这不起作用如果有人可以帮助我解决我的问题，我将不胜感激，谢谢！

这是一个指向我的 IDE 的链接，因为我认为通过它来识别我正在犯的任何错误会更容易：https://repl.it/@AS11RA/Forest-Firefighters-Website#index.html

这里是开始的 questions.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'
    },
    correctAnswer: 'b'
  },
  {
    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'
    },
    correctAnswer: 'a'
  },
  {
    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'
    },
    correctAnswer: 'a'
  },
  {
    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'
    },
    correctAnswer: 'a'
  },
  {
    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'
    },
    correctAnswer: 'c'
  },
  {
    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, oxygen, wood'
    },
    correctAnswer: 'c'
  },
  {
    question: 'Which one of these is NOT a type of forest fire?',
    answers: {
      a: 'Crown',
      b: 'Firework',
      c: 'Surface',
      d: 'Ground '
    },
    correctAnswer: 'b'
  },
  {
    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'
    },
    correctAnswer: 'a'
  },
  {
    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 '
    },
    correctAnswer: 'c'
  },
  {
    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>

Answer 1

您的答案未显示的原因是因为您试图像数组一样循环遍历答案。但是，answers 是一个对象，而不是数组，因此您无法真正执行诸如使用 answers.length 属性等操作。

但是，实际上有一种更简单的方法可以解决此问题，而不是将您的答案转换为数组。那就是在 ourQueuestions.answers 对象上使用带有 object.entries 的 for...of 循环。通过使用 Object.entries(ourQuestions.answers) 方法，您将能够检索“键”和“值”对中的答案，并在循环中轻松使用它们，而无需经典的 for 循环以及 i 和 j 变量等。

此外，您在以下代码块中引用了solveQuiz() 方法，但是，在您的代码中，此方法的名称实际上是solveSurvey() 而不是solveQuiz()。所以我也在下面的代码中改变了它：

document.getElementById('questions').innerHTML +=
    '<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}

最后，我建议您阅读 MDN 文档中有关 ES6 特性的内容，诸如 for...of 循环和 字符串字面量 等内容已在 ES6 中引入早在 2015 年就进入 Javascript，它们将使您作为使用 JS 的开发人员的生活更轻松:)

MDN ES6 Features

祝你好运！您可以直接使用下面的代码，看到它也成功地在 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',
    },
    correctAnswer: 'b',
  },
  {
    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',
    },
    correctAnswer: 'a',
  },
  {
    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',
    },
    correctAnswer: 'a',
  },
  {
    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',
    },
    correctAnswer: 'a',
  },
  {
    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',
    },
    correctAnswer: 'c',
  },
  {
    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, oxygen, wood',
    },
    correctAnswer: 'c',
  },
  {
    question: 'Which one of these is NOT a type of forest fire?',
    answers: {
      a: 'Crown',
      b: 'Firework',
      c: 'Surface',
      d: 'Ground ',
    },
    correctAnswer: 'b',
  },
  {
    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',
    },
    correctAnswer: 'a',
  },
  {
    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 ',
    },
    correctAnswer: 'c',
  },
  {
    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;
}

Answer 2

我在jsfiddle 上运行它并得到以下错误：

"ReferenceError: buttonClicked 未定义"

我相信您的代码中存在一些格式问题。 我在页面中向上移动了您的按钮，它开始工作。看看小提琴。

  <body >
  <button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>

我还删除了你的 JavaScript，除了 buttonClick 函数。

你需要添加你的代码直到它工作。

这是一个显示您的问题的经过编辑的小提琴：

https://jsfiddle.net/raddevus/jbec837y/10/

Answer 3

在我们的问题中，您创建了如下对象的答案

answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%'
}

但在代码中你试图获取它的长度

for (j = 0; j < ourQuestions[i].answers.length; j++)

尝试将其更改为数组，您应该更改逻辑以获得正确答案 还有一件事您使用复选框来选择答案，而不是您应该使用单选组，因为您只有一个正确答案