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 Simplify Repetitive Tasks with Loops For Loops

Posted by evanritscher
evanritscher
10,209 Points

Why does the document.write go outside of the code block?

I think I'm having some conceptual issues understanding the for loop in this video.

The loop runs and if true, then ads one to i and converts var html to <div> i </div>. This I understand.

What I'm confused on is if the for loop changes the html variable to whatever i is until it is over 10, why does the document.write print every instance of the html variable. Wouldn't it just print the last one (i=10) since that's when the for loop stopped evaluating to true and thus escaped the loop?

var html = ' ';

for (var i = 1; i <= 10;  i += 1) {
html += '<div>' + i + '</div>'
}
document.write(html);

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Let's take a look at the code: 

var html = ' ';

for (var i = 1; i <= 10; i++) {
  html += '<div>' + i  +'</div>';
}

document.write(html);

Now your theory would be correct if this line in the middle looked like this. 

html = '<div'> + i + '</div>';

It's the += that makes all the difference. We're starting with an empty string called html. And every time through the loop we're joining/concatenating it with what was already there. So our html string is building and building and building. And then when the loop is done, we print out the whole thing at the same time.

If we'd used the second line that I posted, the original string would be overwritten every time and we'd have the result you describe. Hope that helps! :dizzy:

edited for addition note

And yes, you're correct. The document.write does only run when the loop ends :smiley: But by then we've built up our html string and it contains now everything we need to print!

evanritscher
evanritscher
10,209 Points

So the variable html contains 1, 2, 3, 4, 5 etc.?

Or rather var html contains <div>1</div> <div>2</div> <div>3</div> <div>4</div>?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

evanritscher Yes! Let's say that weren't a 10 and I'm going to use 3 here to make it shorter. At the end of the entire thing the html string will contain "<div>1</div><div>2</div><div>3</div>". Then after the loop is done running, it will print that entire string containing all 3 divs. Every time through the loop we're adding a new div to the string, not replacing it.

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

Without seeing the code, my guess is they want to show you what happens with each time the index is increased. Of course you can print at any index, at whatever phasee desired.

evanritscher
evanritscher
10,209 Points

Hey Cindy,

I added the code from the video. Basically it seems conceptually that document.write would only run when the for loop ends. That is, when i is no longer 10.

Thus document.write sees i as it's last true value (10).