【问题标题】:quiz program not working as expected测验程序未按预期工作
【发布时间】:2016-06-09 10:23:40
【问题描述】:

我正在尝试创建一个测验程序。单击按钮后,每个问题对象都会加载到页面。我有一个代码,但它不起作用。不知道出了什么问题。任何人都可以帮忙。我想通过单击按钮来控制循环,以便获得第一个问题,然后单击下一个问题,依此类推。

var quiz = document.quiz;
var nextButton = document.getElementById('nextButton');

var questions =
    [
      
      {
        question: "What is the color of skye?",
        choices : ["Blue", "White", "Yellow", "Green"],
        answer  : 0
      },
      
      {
        question: "What is the color of skye?",
        choices : ["Blue", "White", "Yellow", "Green"],
        answer  : 0
      }
    ];

var counter = 0;


  nextButton.onclick = function () {
  while ( counter < questions.length ) {
        
          var question = questions[counter].question;
          var choices = questions[counter].choices;
          var answer = questions[counter].answer;
              answer = choices[answer];
          
          print( question, choices, answer );
          counter++;
       
  }
   };

function print ( question , choices , answer ) {
    
    var html = "";
  
    html += "</h3>" + question + "</h3>";
  
    for ( var option in choices ) {
      
        html += "<input type='radio' name='option'>" + choices[option] + "</input>";
        html += "<br>";
      
    }
  
    quiz.innerHTMl = html;
}
<!DOCTYPE html>
<html>
<head>
	<title> Quiz </title>
</head>
<body>
<form action="" name="quiz"></form>
<form action="" name="controls">
  <input type="button" value="Next" id="nextButton">
</form>
<script src="quiz.js"></script>
</body>
</html>

【问题讨论】:

  • 对问题数组中的相同问题对象感到抱歉。应该是不同的问题。
  • 使用控制台日志/警报并验证流程和数据
  • var quiz = document.quiz;那是什么?什么是 document.quiz?
  • 它是我将测验数据附加到的表单的名称
  • 我注意到的第一个错误是你必须&lt;\h3&gt;。只有一个应该关闭。关于问题本身,可以用jQuery吗?

标签: javascript html arrays loops object


【解决方案1】:

这里是您的代码示例https://jsfiddle.net/r1kcL1pc/

quiz.innerHTMl = html;

此行必须更改

 quiz.innerHTML = html;

只有一个字母:)

然后,我删除了while cicle,因此您可以在每次单击按钮时更改问题。

【讨论】:

  • 如何在页面加载时加载第一个问题?
  • 嗨,这里找到了为实现您的目标而修改的代码jsfiddle.net/r1kcL1pc/1
  • 感谢您的帮助 giuseppe straziota
  • 我试图捕捉用户的答案,但无法弄清楚。谁能帮忙。
猜你喜欢
  • 2018-03-21
  • 1970-01-01
  • 1970-01-01
  • 2013-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-27
相关资源
最近更新 更多