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 The Refactor Challenge

Why and how that works?

when I run:

var html = '';

var red;

var green;

var blue;

var rgbColor;

for(var i = 0; i < 4; i++) {

red = Math.floor(Math.random() * 256 );

green = Math.floor(Math.random() * 256 );

blue = Math.floor(Math.random() * 256 );

rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

html += '<div style="background-color:' + rgbColor + '"></div>';

document.write(html);

}

I get 10 divs with 10 random colors.

But when I change it to:

var html = '';

var red;

var green;

var blue;

var rgbColor;



for(var i = 0; i < 4; i++) {

red = Math.floor(Math.random() * 256 );

green = Math.floor(Math.random() * 256 );

blue = Math.floor(Math.random() * 256 );

rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

html += '<div style="background-color:' + rgbColor + '"></div>';

}

document.write(html);

It generates only 4, the expected.

Can somebody explain why? Thank you.

2 Answers

Steven Parker
Steven Parker
231,275 Points

In the second example, the loop builds up the "html" string, adding a new "div" in each iteration until it has 4 of them. Then when the loop ends the "document.write" outputs the string with the 4 divs in it.

But in the other example, the write is inside the loop, so every time the string is expanded it gets written. So when it has one div in it, that gets put on the page. Then when it has two in it, those two get put on the page following the one already written (total 3 so far). Then another one is added and those 3 are added to the others (total now 6). Finally the fourth one is added and they are all put to the page with the others, giving you a total of 10.

If you look closely, you should notice that the colors are not all random since some divs are put out multiple times. For example, the first, second, fourth and seventh will all be the same color.

Does it make sense now?

Thank you that was driving me crazy. Do you work for teamtreehouse? if not, you should because you're always very helpful. cheer!

Steven Parker
Steven Parker
231,275 Points

Thank you! :blush: My main job is elsewhere (currently on a disaster relief assignment helping the people of Puerto Rico); but I do enjoy helping folks here also, and I learn things myself by doing it.

I would, however, be an unpaid intern or moderator if they wanted me to, it would make it easier to help folks here.

Maybe shoot them an email. Check out this thread: https://teamtreehouse.com/community/how-to-be-a-moderator-of-treehouse also, can I ask how you learn to code ?

Steven Parker
Steven Parker
231,275 Points

It's not like they don't know who I am :wink:

I learn from a variety of sources. Treehouse is one of my favorites, but to supplement that (or for things not taught here) there are a few other online resources I like (Coursera and Lynda/LinkedIn Learning for example), plus sometimes I just dig through text training and reference guides from the software source (like MSDN for C# and the Python Software Foundation for Python) or a well-known reliable reference (like MDN for HTML/CSS/JavaScript).

Jorge Lopez
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jorge Lopez
Python Development Techdegree Graduate 35,350 Points

You're an incredible person.

"I just like helping people on these forums. My REAL job is helping people during disasters...."

Just wanted to say that.