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

Posted by Sean O'Brien
Sean O'Brien
17,078 Points

document.write vs document.getElementById

I completed the Build a Quiz challenge in JavaScript Loops, Arrays and Objects, but in my version, when I replace

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

with

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

... only the last line I have asked to print gets printed. I can go through and replace my code with Mr. McFarland's version and make it work, but I would like to know why these supposedly interchangeable functions are not interchangable in the code I wrote, which you can see here:

var quiz = [
  ['How much wood could a wood chuck chuck? (number of cords)', 7],
  ['How many engineers does it take to screw in a lightbulb?', 1],
  ['How many inches in a foot?', 12]
];

var answer;
var numberRight = 0;
var html;

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

for (var i = 0; i < quiz.length; i += 1) {
  answer = parseInt(prompt(quiz[i][0]));
  if (answer === quiz[i][1]) {
    numberRight += 1;
    quiz[i].push(true);
  } else {
    quiz[i].push(false);
  }
}

html = "You got " + numberRight + " question(s) right.";
print(html);

function listQuestions( accuracy ) {
  var questions = '<ol>';
  for (var i = 0; i < quiz.length; i += 1) {
    if (quiz[i][2] === accuracy) {
      questions += '<li>' + quiz[i][0] + '</li>';
    }
  }
  questions += '</ol>';
  print(questions);
}

print('<h2>You got these questions correct:</h2>');

listQuestions(true);

print('<h2>You got these wrong, dicknuts!</h2>');

listQuestions(false);

2 Answers

Hugo Paz
Hugo Paz
15,622 Points

Hi Sean,

The problem with innerHtml is that it replaces the whole html inside the element. So lets follow the script execution:

First it inserts the html with the amount of answers you got right, then it lists the questions you got right and finally the ones you got wrong. Every time innerHtml removes whats inside the output div and replaces it with the latest html.

So what you want is to append html without replacing whats already there.

You can do it with insertAdjacentHTML()

//I put the variable outputDiv outside because there is no need to set it every time if its value never changes.
var outputDiv = document.getElementById('output');
function print(message) {
  outputDiv.insertAdjacentHTML('beforeend', message);
}

You can read more about insertAdjacentHTML() here

Sean O'Brien
Sean O'Brien
17,078 Points
Sean O'Brien
Sean O'Brien
17,078 Points

Thanks, Hugo! Perfectly explained.