未定義傳遞給數組

Question

我對測驗的應用程序的代碼。問題是，不知何故undefined傳遞給數組choices。

'use strict'; 
 

 
var quiz, 
 
    actualQuestion = 1, 
 
    getChoices, 
 
    generateHtml, 
 
    html = '', 
 
    choices = []; 
 

 
quiz = [{ 
 
    question: "Who is Prime Minister of the United Kingdom?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}, { 
 
    question: "Who is Prime Minister of the United Kingdom2?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}]; 
 

 
getChoices = function() { 
 
    for (var i = 0; i < quiz[actualQuestion].choices.length; i++) { 
 
    choices[i] += quiz[actualQuestion].choices[i]; 
 
    console.log(choices[i]); 
 
    } 
 
} 
 

 
generateHtml = function() { 
 
    for (var i = 0; i < choices.length; i++) { 
 
    html += '<label>' + 
 
     '<input type="radio" name="answer">' + 
 
     choices[i] + 
 
     '</label>'; 
 
    } 
 
} 
 

 
getChoices(); 
 
generateHtml(); 
 

 
document.getElementById('answers').innerHTML = html; 
 
console.log(
 
    html 
 
);

<form id="quiz"> 
 
    <div id="question"> 
 

 
    </div> 
 
    <div id="answers"> 
 

 
    </div> 
 
    <input type="button" value="Next"> 
 
</form>

Answer 1

問題是choices[i] += quiz[actualQuestion].choices[i];的choices[i]的價值是不確定的，因爲你要定義一個空數組所以你必須choices[i] = undefined + quiz[actualQuestion].choices[i];

剛將其更改爲choices[i] = quiz[actualQuestion].choices[i];

'use strict'; 
 

 
var quiz, 
 
    actualQuestion = 1, 
 
    getChoices, 
 
    generateHtml, 
 
    html = '', 
 
    choices = []; 
 

 
quiz = [{ 
 
    question: "Who is Prime Minister of the United Kingdom?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}, { 
 
    question: "Who is Prime Minister of the United Kingdom2?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}]; 
 

 
getChoices = function() { 
 
    for (var i = 0; i < quiz[actualQuestion].choices.length; i++) { 
 
    choices[i] = quiz[actualQuestion].choices[i]; 
 
    console.log(choices[i]); 
 
    } 
 
} 
 

 
generateHtml = function() { 
 
    for (var i = 0; i < choices.length; i++) { 
 
    html += '<label>' + 
 
     '<input type="radio" name="answer">' + 
 
     choices[i] + 
 
     '</label>'; 
 
    } 
 
} 
 

 
getChoices(); 
 
generateHtml(); 
 

 
document.getElementById('answers').innerHTML = html; 
 
console.log(
 
    html 
 
);

<form id="quiz"> 
 
    <div id="question"> 
 

 
    </div> 
 
    <div id="answers"> 
 

 
    </div> 
 
    <input type="button" value="Next"> 
 
</form>

Answer 2

因爲，當你聲明choices陣列沒有元件。所以，當你使用choices[i]首次，這是undefined。

爲了解決這個問題，該陣列元件初始化到空，如果它是用undefined下面的語句。

choices[i] = choices[i] ? choices[i] : ''; 

演示

'use strict'; 
 

 
var quiz, 
 
    actualQuestion = 1, 
 
    getChoices, 
 
    generateHtml, 
 
    html = '', 
 
    choices = []; 
 

 
quiz = [{ 
 
    question: "Who is Prime Minister of the United Kingdom?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}, { 
 
    question: "Who is Prime Minister of the United Kingdom2?", 
 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
 
    correctAnswer: 0 
 
}]; 
 

 
getChoices = function() { 
 
    for (var i = 0; i < quiz[actualQuestion].choices.length; i++) { 
 
    choices[i] = choices[i] ? choices[i] : ''; 
 
    choices[i] += quiz[actualQuestion].choices[i]; 
 
    console.log(choices[i]); 
 
    } 
 
} 
 

 
generateHtml = function() { 
 
    for (var i = 0; i < choices.length; i++) { 
 
    html += '<label>' + 
 
     '<input type="radio" name="answer">' + 
 
     choices[i] + 
 
     '</label>'; 
 
    } 
 
} 
 

 
getChoices(); 
 
generateHtml(); 
 

 
document.getElementById('answers').innerHTML = html; 
 
console.log(
 
    html 
 
);

<form id="quiz"> 
 
    <div id="question"> 
 

 
    </div> 
 
    <div id="answers"> 
 

 
    </div> 
 
    <input type="button" value="Next"> 
 
</form>

Answer 3

在代碼中，你是未定義串聯用字符串這就是爲什麼未定義作爲一個選項出現：

choices[i] += quiz[actualQuestion].choices[i];

例：由於choices[0]未定義choices = [];因此，會得到與quiz[actualQuestion].choices[i]連接起來，這將導致字符串「undefin在編輯「與」大衛卡梅隆「連接。