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

Daniel Mejia
Daniel Mejia
12,481 Points
Posted by Daniel Mejia
Daniel Mejia
12,481 Points

My code won't print when I use "function print(message)" with "get.ElementByID('output');"

This is my answer to this challenge and for some reason I won't work when I used this version of function print: 

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

But It works fine when I use:

function print(message) {
  document.write(message);
}

What am I missing here?

Here is my whole code for this challenge: 

var questions = [
  ['How many states are in the United States?', 50],
  ['How many continents are there?', 7],
  ['How many legs does an insect have?', 6]
];
var correctAnswers = 0;
var question;
var answer;
var response;
var html;
var correct = [];
var wrong = [];
var answered = ['correct', 'wrong'];

// This function is commented so I can use the 1990's version of print(message)
//function print(message) {
//  var outputDiv = document.getElementById('output');
//  outputDiv.innerHTML = message;
//}

function print(message) {
  document.write(message);
}

for (var i = 0; i < questions.length; i += 1) {
  question = questions[i][0];
  answer = questions[i][1];
  response = prompt(question);
  response = parseInt(response);
  if (response === answer) {
    correct.push(question);
    correctAnswers += 1;
  } else {
    wrong.push(question);
  }
}

function printAnswers( answers ) {
  var title = '<h2>You got these questions ' + answered.shift(0) + ' :</h2>';
  var listHTML = '<ol>';
  for (var i = 0; i < answers.length; i += 1) {
    listHTML += '<li>' + answers[i] + '</li>';
  }
    listHTML += '</ol>';
    print(title);
    print(listHTML);
}

html = "You got " + correctAnswers + " question(s) right."
print(html);
printAnswers(correct);
printAnswers(wrong);

Thanks for your help :)

Jacob Mishkin
Jacob Mishkin
23,117 Points

are you working off of workspaces or your own text editor. the reason I ask is because maybe you need to check your HTML to see if the div has the Id of output.

Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

Hi Jacob: I'm using the workspace. I see the Id of output in the HTML. Here is the HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Quiz</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>JavaScript Quiz</h1>
<div id="output">

</div>
<script src="js/quiz.js"></script>
</body>
</html>

1 Answer

Amy Kang
Amy Kang
17,188 Points
Amy Kang
Amy Kang
17,188 Points

You're writing over the div everytime you call the print method. Save all of your message in one variable and send it to the print method one time and it should work. 

var listHTML = "You got " + correctAnswers + " question(s) right.";

function printAnswers( answers ) {
  listHTML += '<h2>You got these questions ' + answered.shift(0) + ' :</h2>';
  listHTML += '<ol>';
  for (var i = 0; i < answers.length; i += 1) {
    listHTML += '<li>' + answers[i] + '</li>';
  }
    listHTML += '</ol>';
}

printAnswers(correct);
printAnswers(wrong);
print(listHTML);

document.write adds to the page, while innerHTML replaces the content of the div.

Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

It works now! Thanks a lot Amy Kang :D

Daniel Mejia
Daniel Mejia
12,481 Points
Daniel Mejia
Daniel Mejia
12,481 Points

I posted another question in the forum that I originally asked you here, but though that maybe it would be better if you could answer it in the forum to share it with other people that might have the same question. Thanks again!