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

Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points
Posted by Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points

Print function overrides previous calls. What am i missing?

Title.

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

var qna = [
  ["The Communist Manifesto was written by which two German philosophers?",
   "Marx and Engels"],
  ["Which actor that once played James Bond previously competed in the Mr. Universe bodybuilding competition?",
   "Sean Connery"],
  ["Which pop star sang the national anthem at the 50th Super Bowl?",
   "Lady Gaga"]
];
var correctAnswers = 0;
var question;
var answer;
var response;
var html;
var correctQ = [];
var wrongQ = [];


for ( i = 0; i < qna.length ; i += 1) {
  question = qna[i][0];
  answer = qna[i][1];
  response = prompt(question);
  if (response === answer){
    correctAnswers += 1;
    correctQ.push(question);
  }else {
    wrongQ.push(question);
}
}

html = "You got " + correctAnswers + " questions right.";
html2 = "Questions you guessed correct are: " + correctQ;
html3 = "Questions you guessed wrong are: " + wrongQ;

print(html);
print(html2);
print(html3);

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! It's because you when you call the print message it takes one string as a parameter. Whatever is currently in your output div will be overwritten with whatever string you send in. So, ideally what you'd want to do is build up a string with everything you want and then send in the entire thing for it to be printed out. You'll need to do some concatenation to make this happen. Take a look at an example:

var html = "";

html = '<h1>Hi there, Atil!<h1>';
html += '<p>Here is how you build upon an existing string</p>'`;
html += '<p>Then send the entire string in at once</p>';

print(html);

Because that entire html string is in one variable and it's what we're sending in, all that html would be printed to your output div. Hope this helps! :sparkles:

Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points
Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points

That fixed it! should've thought of printing everything in one call when i noticed it was overriding... Thanks Jennifer!

marlomgirardi
PLUS
marlomgirardi
Courses Plus Student 3,073 Points
marlomgirardi
marlomgirardi
Courses Plus Student 3,073 Points

try outputDiv.innerHTML*+*= message; on your print function:

function print(message) {
  var outputDiv = document.getElementById("output");
  outputDiv.innerHTML += message;
}
Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points
Atıl Kurtulmuş
Atıl Kurtulmuş
4,945 Points

Concatenating fixed it. Thanks for your answer!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Marlom Girardi also has an elegant solution. However, it has a down side. You cannot use this function to clear the output div if needed. However, this could easily be countered by making another function:

function clearOutput() {
   var outputDiv = document.getElementById("output");
   outputDiv.innerHTML = "";
}

// and then call when needed
clearOutput();