我试图用对象填充div

Question

我试图在按下开始按钮的同时使用对象填充div但是我在新创建的div中获得的是任何想法，以下内容有什么不妥。

var trivia = [
  // question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



 console.log(trivia);

$("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
testDiv.innerHTML = trivia.question + trivia.answers;
var questionsDiv = document.getElementById('questions');
questionsDiv.appendChild(testDiv);
});

Answer 1

var trivia = [
  // question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



 console.log(trivia);

$("#startButton").on('click', function populate() {
var testDiv = document.createElement("div");
testDiv.innerHTML = trivia[0].question + trivia[0].answers;
var questionsDiv = document.getElementById('questions');
questionsDiv.appendChild(testDiv);
});

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

因为你试图从对象数组中获取值。你需要提供索引来从中获取价值。喜欢这个琐事[0]。问题。

或者

您可以根据需要更改对象的结构。

Answer 2

不确定你想要什么，因为它是你开始的阵列。选择一个元素以确保trivia[0].question或循环它们：

<div id="questions"></div>
<button id="startButton" onclick="populate()">start</button>
<script>
var trivia = [
// question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



console.log(trivia);
function populate() {
    var i;
    for (i = 0; i< trivia.length; i++){
        var testDiv = document.createElement("div");
        testDiv.innerHTML = trivia[i].question + trivia[i].answers;
        var questionsDiv = document.getElementById('questions');
        questionsDiv.appendChild(testDiv);
}
};
</script>

Answer 3

trivia 是一个对象数组，因此你需要提供数组索引才能从中获取值。运行循环以检索所有属性。

例如：

var trivia = [
  // question 1
    {
        "question": "Q1?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 2
    {
        "question": "Q2?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 3
    {
        "question": "Q3?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    },
    // question 4
    {
        "question": "Q4?",
        "answers": ["1", "2", "3", "4"],
        "correctAnswer": 0
    }
];



 console.log(trivia);
$(function(){
    $("#startButton").on('click', function populate() {
       var testDiv = document.createElement("div");
       testDiv.innerHTML = trivia[0].question + trivia[0].answers;
       var questionsDiv = document.getElementById('questions');
       questionsDiv.appendChild(testDiv);
      });
   });

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