Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops For Loops

Edgar Mantes
Edgar Mantes
9,499 Points

Why did all numbers written out on the document? Can someone please clarify for me...

In this video he had a "for loop" that looked like this:

var html;

for ( var i = 1; i <= 10; i += 1 )

{ html += div + i + /div; } document.write(html)

When he previewed the results of this loop the document printed out 0 through 9. When I look at this code its seems like it is only suppose to print out the last value of the variable "html." Doesn't everything repeat from "for" all the way to the last "}" until the condition is false, then jumps out of the loop and executes the next line of code. Which in this case is the document.write(html). And the last value the variable "html" got should be 9. That is why, in my head, the result should only be 9 and not 0 thru 9.

I know that I'm missing some key concept here. Can someone please help me out.

3 Answers

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

I think you may have misread his code. The code he posts in the video is as such:

var html = ' '

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

Because he's looping through and every time appending a block level item (in this case a div) to the html it will produce all numbers in that loop on a new line when the document.write function writes out the fully concatenated html string.

Just to clarify: Every time through the loop he's building up the string "html". When it's all built it prints it all out at once to the document.

Edgar Mantes
Edgar Mantes
9,499 Points

Awesome! Thanks... I know that the single quotes on the div's are necessary but what about the single quotes on the variable html? Would it be okay to use "var html;" in this case?

Thanks again for the quick response!

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Edgar,

Just to add some clarity, here is the series of events that takes place in this code:

  1. We create the html variable in the first line and assign it a blank space as a value.

  2. Then we create our loop and tell it to run ten times.

  3. Each iteration of the loop, our counter variable (i) increases by one.

  4. On the first iteration we assign a div tag with the value of i (0 at the moment) as the value of the html variable to be displayed within the div element created on this iteration.

  5. On the second iteration, we run through the same process but since we're using a += operator inside the loop, we're basically telling html to "Keep what you have already (The initial value of (div)0(/div)), and add a new div to the end of value". The value for html becomes: (div)0(/div)(div)1(/div)

  6. We run through the rest of the loop, which just continually adds more divs until we hit ten divs.

  7. The loop ends and we ask the system to print out the value of html, which is the set of ten divs with different numbers for each iteration of the loop they represent.

Good luck with the course!

Edgar Mantes
Edgar Mantes
9,499 Points

This is a great explanation! Thanks Daniel. Definitely clarified this issue for me.

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Jennifer,

Thanks for the heads up. I've fixed the issue and also noticed that the markdown was acting up and printing out the value of the div tags, so I've switched the angle braces with parentheses.

Thanks again!

Edgar Mantes
Edgar Mantes
9,499 Points

perfect! thanks again