Question

我想用4个琐事问题和带有for循环的答案来填充带有问题ID的div。不幸的是，正如我现在所做的那样，我的代码只会将问题4与div的答案放在一起，任何关于我做错的想法都会非常感激。

＆＃13;

var myObj = {ownProp1:1, ownProp2:2};

function logAllProperties(obj) {
     if (obj == null) return; // recursive approach
     console.log(Object.getOwnPropertyNames(obj));
     logAllProperties(Object.getPrototypeOf(obj));
}
logAllProperties(myObj);

＆＃13;

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function populate() {
    var testDiv = document.createElement("div");
    for (var i = 0; i < trivia.length; i++) {
      testDiv.innerHTML = '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

＆＃13;

Answer 1

你在每个循环中覆盖你的innerHtml。

＆＃13;

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function populate() {
    var testDiv = document.createElement("div");
    for (var i = 0; i < trivia.length; i++) {
      testDiv.innerHTML += '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions"></div>

<button id="startButton" type="button">Start</button>

＆＃13;

Answer 2

你不需要使用for循环在click事件旁边定义当前的qustion数字，并在执行click事件时增加。

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  }, {
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  }, {
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }, {
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  var currentQuestionNo = 0;

  $("#startButton").on('click', function populate() {
  
    //no more questions 
    if(currentQuestionNo > trivia.length -1){
       return;
    }
    
  
    var testDiv = document.createElement("div");

    testDiv.innerHTML = '<h3>' + trivia[currentQuestionNo].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[currentQuestionNo].answers[0] + '</p>' +
      '<p><input type="radio" name ="answer" value="2">' + trivia[currentQuestionNo].answers[1] + '</p>' +
      '<p><input type="radio" name ="answer" value="3">' + trivia[currentQuestionNo].answers[2] + '</p>' +
      '<p><input type="radio" name ="answer" value="4">' + trivia[currentQuestionNo].answers[3] + '</p>' +
      '<p></form> </div>';
    currentQuestionNo++;
    var questionsDiv = document.getElementById('questions');
    questionsDiv.appendChild(testDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions"></div>

<button id="startButton" type="button">Start</button>

Answer 3

您可以使用jquery执行此操作：

$(function() {
  var trivia = [{
    question: "01. What is CSS?",
    answers: ["Casscading Style Sheets", "Carrot steamed soup", "Corruoted style sheets", "Casscading stairs sheets"],
    correctAnswer: 0
  },{
    question: "02. Q2?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 1
  },{
    question: "03. Q3?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  },{
    question: "04. Q4?",
    answers: ["1", "2", "3", "4"],
    correctAnswer: 3
  }];

  $("#startButton").on('click', function() {
    var testDiv = '<div>';
    for (var i = 0; i < trivia.length; i++) {
      testDiv += '<h3>' + trivia[i].question + '</h3>' + '<div><form><p><input type="radio" name="answer" value="right">' +
      trivia[i].answers[0] + '</p>' +
        '<p><input type="radio" name ="answer" value="2">' + trivia[i].answers[1] + '</p>' +
        '<p><input type="radio" name ="answer" value="3">' + trivia[i].answers[2] + '</p>' +
        '<p><input type="radio" name ="answer" value="4">' + trivia[i].answers[3] + '</p>' +
        '<p></form> </div>';
    }
    testDiv += '</div>';        
    $('#questions').html(testDiv);
  });
});

用对象动态填充div

3 个答案: