Undefined is passed to array

Question

I have this code for quiz app. The problem is, that somehow undefined is passed to the array 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

The problem is choices[i] += quiz[actualQuestion].choices[i];, the value of choices[i] is undefined since you are defining an empty array so you have choices[i] = undefined + quiz[actualQuestion].choices[i];

Just change it to 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

In your code, you are concatenating undefined with a string which is why undefined appears as an option:

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

Ex.: choices[0] is undefined since choices = []; Thus, it will get concatenated with quiz[actualQuestion].choices[i] which will result in the string "undefined" being concatenated with "David Cameron".

Answer 3

Because, when you declare the choices array there are no elements. So, when you use choices[i] for the first time, it is undefined.

To solve this problem, initialize the array element to empty string if it is undefined using following statement.

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

Demo

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