我想填充一个对象的div

Question

我想填充一个对象的div，当按下开始按钮时，但我所得到的只是nan在新创建的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] .question。

或

您可以按照您的要求更改对象的结构。

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

琐事是对象的数组，因此，您需要以为了从it.Run获得价值循环提供数组索引检索所有属性。

例如：

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>