Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Hamza Saleemi
Hamza Saleemi
4,257 Points

Why won't this solution print?

var wrong = [];
var correct = [];
var ans = [];
var correctAns = 0;
var questions = [
  ['What color is the sky?', 'blue'],
  ['What date was Pakistan founded?','1947'],
  ['What year was JFK assassinated?','1963'],
  ['Who gifted the Statue of Liberty to the US?', 'france'],
  ['Pickle?','yes']
];

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

function printList(list) {
  var listHTML = '<ol>';
  for(var i=0; i < list.length; i++) {
    listHTML += '<li>' + list[i] + '</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}

for(var i=0; i < questions.length; i++) {
  ans.push(prompt(questions[i][0]));
  if(ans[i].toLowerCase() === questions[i][1]) {
    correct.push(questions[i][0]);
    correctAns += 1;
  } else {
    wrong.push(questions[i][0]);
  }
}
print('<h1>You got ' + correctAns + '  questions right.</h1>');
print('<h1>Congrats! There are the questions you got right:</h1>');
printList(correct);
print('<h1>There are the questions you got wrong:</h1>');
printList(wrong);

1 Answer

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

Hi there,

first the question, do you have an element with the id="output" where you can print your solution? If not create it and you will have a result.

But secondly you are replacing each print with the next

At first you print '<h1>You got ' + correctAns + ' questions right.</h1>' But then you replace it with '<h1>Congrats! There are the questions you got right:</h1>'

And then with the list and so on.

The printList(list) should return just listHtml and not print it.

You need to each message in a message variable and call the print function with that variable.

function printList(list) {
  var listHTML = '<ol>';
  for(var i=0; i < list.length; i++) {
    listHTML += '<li>' + list[i] + '</li>';
  }
  listHTML += '</ol>';
  return listHTML;
}
var message = '<h1>You got ' + correctAns + '  questions right.</h1>';
message += '<h1>Congrats! There are the questions you got right:';
message += printList(correct);
message += '<h1>There are the questions you got wrong:';
message += printList(wrong);
print(message);
Hamza Saleemi
Hamza Saleemi
4,257 Points

Thanks! I tried it out and seemed to fix my problem

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

Hey Hamza,

glad it worked.

Did you understand the difference?

To bring it down to one line:

outputDiv.innerHtml replaces its content.

Hope it helps

Hamza Saleemi
Hamza Saleemi
4,257 Points

Hey Felix, Yup I got it. Makes sense now! Do you have any recommendations for books or other resources to help me expand my understanding of JavaScript?

Felix Sonnenholzer
Felix Sonnenholzer
14,654 Points

A while ago I read http://eloquentjavascript.net.

It is a available for free to read in a browser, but the author is happy if you buy the printed version as well :)

In the browser it is pretty fun because there are code examples you can modify and play with. Also, it is not big book, so it may be lacking details, but it gives you a pretty good overview, and you can read it relatively fast.