2017-07-14 179 views
0

我想填充一個對象的div,當按下開始按鈕時,但我所得到的只是nan在新創建的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); 
}); 
+2

'trivia'是一個數組,所以你需要遍歷它,肯定'trivia.question'和'trivia.answers'將返回_undefined_ – Satpal

回答

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。

您可以按照您的要求更改對象的結構。

0

不確定你在這裏想要什麼,因爲它是一個你開始使用的數組。無論是選擇一個元素在他們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> 
0

瑣事是對象的數組,因此,您需要以爲了從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>