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

Walter Rivas
PLUS
Walter Rivas
Courses Plus Student 3,894 Points
Posted by Walter Rivas
Walter Rivas
Courses Plus Student 3,894 Points

Could someone explain me what is happening here ?

why this code produces 3 colors when the function is only called twice

    var html = ''";
    var red;
    var green;
    var blue;
    var rgbColor;
    function randomColors() {
      red = Math.floor(Math.random() * 256 );
      green = Math.floor(Math.random() * 256 );
      blue = Math.floor(Math.random() * 256 );
      rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      return html += '<div style="background-color:' + rgbColor + '"></div>';
    }
    document.write(randomColors());
    document.write(randomColors());

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

I only got a syntax error until I removed the stray quote-mark on the top line.

But when the function is called, it uses the concatenating assignment operator ("+=") to add on to the "html" string and then return it. So on the first call, you get one colored div, but on the second call, you get another copy of the first one plus one new one. If you called it a third time, you'd have a total of 6 displayed.

It would probably work more like you expect if it did not use the "html" variable at all:

      return '<div style="background-color:' + rgbColor + '"></div>';
Walter Rivas
Walter Rivas
Courses Plus Student 3,894 Points
Walter Rivas
Walter Rivas
Courses Plus Student 3,894 Points

thanks for taking a bit of your time helping me , but could you please explain me why im getting a copy of the first one ?, i mean

html = " ";
So every time i call the function i get a new random color that it is added to html = " " ; in the first call lets say the function returns "black" (lets pretend that is a rgb color .... ) , if i call to the function again and now returns ("yellow") it should not be added to html+= ?

html = "black" "yellow"

P.S : I apologize for the possible orthographic errors

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

So the original line that I was suggesting the replacement for is this:

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

This adds the new element to the variable "html" and returns it. Since the first call starts with "html" set to blank, you get just one div returned. But on the second call, "html" doesn't start out blank. At this point, it still contains the element that was created by the first call. The function then adds a second div onto "html" and then returns them both.

You could fix this by using a normal assignment ("=") instead of the concatenating assignment operator, but since the variable "html" doesn't seem to be used anywhere else in the code, it made sense to remove it entirely and let the function simply return the new element directly.