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
Howie Yeo
Courses Plus Student 3,639 PointsWhy 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
23,309 PointsThis 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??
Iain Simmons
Treehouse Moderator 32,305 PointsIt'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
Treehouse Moderator 27,671 PointsHowie,
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
Courses Plus Student 3,639 PointsAh okay, so instead of using line-break for html in javascript, Treehouse actually already predefine the line-break using CSS ?
Douglas Counts
10,060 PointsHowie 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.
Howie Yeo
Courses Plus Student 3,639 PointsHowie Yeo
Courses Plus Student 3,639 PointsThanks 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?