I get "undefined" before my list as well as printed more than it should

Question

So I get "undefined before the list as well as the second list printed with the correctly answered questions and then incorrectly answered questions. Basically 3 lists in total.

var questions = [
  ["capital of Poland?", "warsaw"],
  ["Currency in European Union?", "euro"],
  ["Neighbour of Portugal?", "spain"],
  ["The year of Athens Olympic Games?", 2004],
  ["Winner of the Eurovision 2017?", "portugal"]
];

var correctQuestions = [];
var wrongQuestions = [];
var innerHTML;
var html;
var response;

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function askingQuestions (question, correctList, wrongList) {
  for (var i = 0; i < question.length; i++) {
    response = prompt(question[i][0]);
    response = response.toLowerCase();
    if (response == question[i][1]) {
      correctList.push(question[i][0]);
    } else {
      wrongList.push(question[i][0]);
    }
  }
}

function createList(list) {
  innerHTML += "<ol>";
  for (var i = 0; i < list.length; i++) {
    innerHTML += "<li> " + list[i] + "</li>";
  }
  innerHTML += "</ol>";
  return innerHTML;
}

askingQuestions(questions, correctQuestions, wrongQuestions);

html = "<h2> Here is the list of correctly answered questions</h2>";
html += createList(correctQuestions);
html += "<h2> Here is the list of wrongly answrered questions</h2>";
html += createList(wrongQuestions);

print(html);

Answer 1 · 2017-11-11T21:20:36Z

November 11, 2017 9:20pm

That's a result of the createList function adding to "innerHTML" before anything has been assigned to it. And continuing to add to it on each call instead of starting fresh.

Just use an ordinary assignment to start building it each time:

function createList(list) {
  innerHTML = "<ol>";  // note = instead of +=
  // ...

Answer 2 · 2017-11-11T21:24:25Z

November 11, 2017 9:24pm

in your createList function you just create one long html will all your questions. basically when you call it the first time, it gathers all of the correct questions, then when you call it the second time, you concat the previous list will the wrong questions list. this is happening because you're storing everything in one variable called "innerHtml" and you start the create list function with "innerHtml +=" which will start by concatenating to the previous value i.e. the correct questions. this would explain why you get both lists in the second call.

Welcome to the Treehouse Community

Looking to learn something new?

Laurynas Stoma

Laurynas Stoma

I get "undefined" before my list as well as printed more than it should

2 Answers

Steven Parker

Steven Parker

Zack Lee

Zack Lee