dynamisch div mit Objekt befüllen

Question

Ich möchte ein div mit einer ID von Fragen mit den 4 Quizfragen und die Antworten mit einer for-Schleife bevölkern. Leider, wie ich es jetzt habe, stellt mein Code nur Frage 4 mit seinen Antworten auf das Div jede Idee, was ich falsch mache würde sehr geschätzt werden.

$(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); 
 
    }); 
 
});

<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 1

youre Ihre innerhtml in jeder Schleife zu überschreiben.

$(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); 
 
    }); 
 
});

<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 2

Sie brauchen nicht für Schleife definieren die aktuelle qustion Nummer aus der Seite des Click-Ereignis und Erhöhung zu verwenden, während Click-Ereignis ausgeführt wird.

$(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

Sie können es mit Jquery wie:

$(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); 
    }); 
});