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

Florentin Dumitrache
Florentin Dumitrache
3,757 Points

Why i can't put document.write in a for loop?

If document.write() is outside the for loop the program runs , but if is in the loop it shows another result. Can someone explain me?

4 Answers

Steven Parker
Steven Parker
231,122 Points

The difference is when and how many times it runs.

In the first example, the loop builds up a string with ten numbers and then when it finishes, the document.write puts them on the page.

But in the second example, the document.write puts the partially-built string on the page 10 times, with the string a little longer each time. The first time it only has "1", the next time both "1" and "2", then "1" "2" and "3".. and so on.

So that explains the difference. Now if you move the document.write into the loop and you change the string so instead of building it up it starts over each time, then the output would look the same:

for (var i = 1; i <= 10; i += 1) {
     var html = '<div>' + i + '</div>' ;
     document.write(html);
}
Tiffany White
Tiffany White
5,373 Points

As Steven Parker said, when you have

var html = '';

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


}
document.write(html);

and document.write(html); outside of the for loop, it only executes the function 1 time.

When you have:

var html = '';

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

document.write(html);
}

document.write(html); is actually scoped to the for loop code block. So when the for loop runs, it sort of sucks up the document.write(html); function and iterates over it as well as what is in the for loop.

Check out the MDN documentation for for loops

Steven Parker
Steven Parker
231,122 Points

If you change the code, I would expect another result.

What do you mean by "shows another result"? Perhaps you could describe the difference in more detail.

Most importantly, please show your actual code, or even better, make a snapshot of your workspace and post the link to it here.

Florentin Dumitrache
Florentin Dumitrache
3,757 Points

Why this code

var html = '';

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


}
document.write(html);

is different than this one:

var html = '';

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

document.write(html);
}
Yi Ming
Yi Ming
4,679 Points

If you write your code like this, you can get the same result as the video shows.

var html = ' ';

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

Just change "html += ..." to " html = "

Steven Parker
Steven Parker
231,122 Points

That's exactly what I said back on May 24th. :smirk:

:information_source: When posting code, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Or watch this video on code formatting.