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

Howie Yeo
PLUS
Howie Yeo
Courses Plus Student 3,639 Points

Why didnt we use <br> to break the html code?

Hi,

Can anyone explain to me why without the use of line-break (br) in the html variable, the code manage to break itself nicely into each questions/parts ? To my knowledge, += adds on to existing value of an variable, so it must be a long string and needs line-break (br) at some point?

html = "You got " + correctAnswers + " question(s) right."
html += '<h2>You got these questions correct:</h2>';
html += buildList(correctGroup);
html += '<h2>You got these questions wrong:</h2>';
html += buildList(wrongGroup);
print(html);

4 Answers

Ryan Ruscett
Ryan Ruscett
23,309 Points

This is because it goes from top to bottom.

So first print html prints the string. The second print will print the string + the additional stuff. The third html will print the existing HTML string + whatever it next so on and so on.

So you aren't just printing one variable html but all the html variables.

The third HTML value is printed in the function buildList which inside the function it's printing the lines in new an ordered list. So this is how we get 1 and 2 with the text next to it. This happens for both right and wrong answers.

So when you print each line one at a time. Not one statement in a super long line.

Does that help clear it up or I might have confused you more??

Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

Thanks but i'm not sure what you are saying. There is only 1 print function called but you are saying saying there is 2nd and 3rd... I get the idea behind += , after adding the values, the final html variable (used as a parameter for Print function) should be

html = "You got " + correctAnswers + " question(s) right." + '<h2>You got these questions correct:</h2>' + buildList(correctGroup) + '<h2>You got these questions wrong:</h2>' + buildList(wrongGroup)

However, there we did not use line-break (br tag), so the presentation must be inline?

It's actually because of the use of block type HTML elements, which by default take up the entire width and have space above and below.

The h2, as well as the ol and li elements used in buildList, are all block elements. Also, the div within the starting HTML is also a block element.

If the JavaScript code used span, strong or em tags, you wouldn't get the breaks because they are inline HTML elements.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points

Howie,

I'll assume you're referring to the Workspace objectives. Don't forget that presentation comes from CSS, and Treehouse was nice enough to craft up some elegant styles for us targeting the specific tags. You could use

if no styles were declared.
Howie Yeo
Howie Yeo
Courses Plus Student 3,639 Points

Ah okay, so instead of using line-break for html in javascript, Treehouse actually already predefine the line-break using CSS ?

Douglas Counts
Douglas Counts
10,126 Points

Howie is correct in that we are creating one very long HTML string here but the browser doesn't care about line endings and white space.

If you wanted to print it out in a more "human readable" manner, you could simple insert "\n" onto the end of each line as that is a newline character.