开发者问题收集

测验程序未按预期运行

2016-06-09
69

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

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>
1个回答

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

quiz.innerHTMl = html;

此行必须更改为

 quiz.innerHTML = html;

只有一个字母:)

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

giuseppe straziota
2016-06-09