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
Eric Jusic
4,350 PointsNot sure why my code generates 45 divs instead of 10?
I thought this would work, but it doesn't lol. Just not sure why. I've already rewritten it differently so that works, but want to know why it displays 45 divs instead of 10 this way. I can't see whats the catch.
Few approaches I used that output code in such way:
for (i = 1; i <=10; i += 1){
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);
}
Second approach
var html = '';
var red;
var green;
var blue;
var rgbColor;
function random_num(){
var random_num = Math.floor(Math.random() * 256 );
return random_num;
}
function color_generator(){
red = random_num();
green = random_num();
blue = random_num();
return rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
}
for (i = 1; i < 10; i+=1){
html += '<div style="background-color:' + color_generator() + '"></div>';
document.write(html);
}
I used each of them separately and every of them outputs me 45 divs instead of 10, obviously, I am missing something.
After some work I realized if I put document.write(html); outside the for loop everything went fine, why is this behavior existing here? Whats the difference?
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! When I point this out you will likely immediately understand the difference. As it so happens, 45 is the sum of the integers between 1 and 9. If you add up 1, 2, 3, 4, 5, 6, 7, 8, and 9... you get 45. Every time you go through the for loop in the example above you are not only appending to the string, but writing that string to the document. The document doesn't get reset during this time.
So the first iteration you're writing the appended html that you created which contains one div. The second time your new appended string includes 2 divs which you are tacking on to the first one. At that point, there are 3 divs. And the next iteration there are 6 divs because you're now writing an additional 3 to the document.
Moving the document.write outside of the for loop says take my final result and print it to the document.
Hope this clarifies things!
edited for additional information
If you'll look closely, you should see a pattern with your colors looking roughly like this:
1 1 2 1 2 3 1 2 3 4 1 2 3 4 5 1 2 3 4 5 6 1 2 3 4 5 6 7 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 9
Eric Jusic
4,350 PointsOh yes, I see it now! I understand now what I've done here. Thank you very very much for your time and for clearing this out for me :)