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

Posted by Wolfgang Warneke
Wolfgang Warneke
7,146 Points

Is there a better way to deal with this getElementById problem?

When I changed my quiz project from having my print(message) function include document.write to being...

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

...my code then failed. Through looking through others' questions I gathered that this is because the code will try to rewrite over the DIV each time (right? something like that?).

In Amy Kang's answer on Daniel Mejia's question here, she suggested that you need to put all of the HTML to be written in a variable first and then print it out. So having already written my code (only knowing about document.write at that point), I had many instances of calling a print function, not adding the HTML and messages to a string variable, so I tackled the problem like this...

var html = '';
function printQueue(message) {
    html += message;
}

...adding this extra function to step around my issue by changing my previous print()'s to printQueues()'s and adding print(html); at the end of the quiz to print the report in the DIV.

SO MY QUESTION is: ......is this legit? Was this the best way for me to do this or should I have just used the variable directly and went back to change the already-written instances where I called function that no longer worked? Or was it in any way useful to take the lazy way out?

New to this, just lookin' for some advice. Thank you!

-Wolfgang

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Your solution is fine. In fact, some people prefer to write a function for any task that is performed more than once.

However, it would be even more useful, though slightly more code to write, if your printQueue function took another parameter to indicate the variable that should be updated with the new HTML:

var html = '';
function printQueue(messageVar, stringToAppend) {
    messageVar += stringToAppend;
}

In one way, it makes it easier to see what your code is doing, but others may prefer the simplicity of just adding to an existing variable and then printing it once.

There's also the longer syntax for appending to a variable:

html = html + 'new string to append';
// instead of:
html += 'new string to append';
Wolfgang Warneke
Wolfgang Warneke
7,146 Points

Thanks Iain, that would be more useful down the road. Good reminder to me that functions can take multiple arguments; I need to utilize that more