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 Solution

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
Posted by David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

I don't understand how the result of this code would look like

I don't understand what this line of code is doing... or in other words: I don't know what the result of this code would look like (as a code). I know that this code will create a dot in a random color. Can someone tell me, how the html variable would look like after this code runs 10 times?

Here is what I think the result of this code would look like after running 10 times: "12 125 255 165 2 111 222 152 45 98" 

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

1 Answer

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

It's unclear to me exactly what it is you're asking. If you're asking what the HTML will look like after the code is run 10 times:

<div style="background-color:rgb(127,112,22)"></div>
<div style="background-color:rgb(162,48,188)"></div>
<div style="background-color:rgb(125,86,107)"></div>
<div style="background-color:rgb(184,134,63)"></div>
<div style="background-color:rgb(142,102,112)"></div>
<div style="background-color:rgb(56,33,101)"></div>
<div style="background-color:rgb(187,64,111)"></div>
<div style="background-color:rgb(166,229,133)"></div>
<div style="background-color:rgb(74,76,90)"></div>
<div style="background-color:rgb(81,197,163)"></div>
<div style="background-color:rgb(255,214,191)"></div>

The numbers are generated through Math.random() with a range of 0 to 255. It is then concatenated into the string rgbColor:

red = Math.floor(Math.random() * 256 );
green = Math.floor(Math.random() * 256 );
blue = Math.floor(Math.random() * 256 );
rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';

Which is finally concatenated into the html string that is displayed on the page 10 times:

html += '<div style="background-color:' + rgbColor + '"></div>';
David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

Hello Matthew,

thank you very much for your feedback. Even if my questions was difficult to understand, you gave me the answer I was looking for. :D

After reading your answer, I have some more questions. As far as I know, the <div></div> tag creates a division of code. We now have 10 divisions and each of these devisions will be used to apply a random color to one of my circles. How is it possible for the browser to know which div tag to use for which circle? How do I prevent the browser from using one div tag multiple times?

It seems like I have a problem to understand the connection between those div tags and how they are connected to my circles.

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

Those divs are the circles. Every div in your page has the same style except for the background-color which is added through JavaScript. Websites can have many div tags.