未定义传递给数组

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];

即可

＆＃13;

＆＃13;

'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
);

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你的代码中，你将undefined与一个字符串连接起来，这就是为什么undefined作为一个选项出现的原因：

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

例如：choices[0]未定义，因为choices = [];因此，它将与quiz[actualQuestion].choices[i]连接，这将导致字符串“undefined”与“David Cameron”连接。

Answer 3

因为，当您声明choices数组时，没有元素。因此，当您第一次使用choices[i]时，它是undefined。

要解决此问题，请使用以下语句将数组元素初始化为空字符串undefined。

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

<强>演示

＆＃13;

＆＃13;

'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
);

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;