why does this code not function and can i have two return statements inside two seperate functions which are nested ..

Question

inside a function, see the code

var html = '';
var red;
var green;
var blue;
var rgbColor;
// function inside a function
function rgbColor() {

  function randomColor() {
   return Math.floor(Math.random() * 256 );
}
  var color = 'rgb(';
  color += randomColor() + ',';
  color += randomColor() + ',';
  color += randomColor() + ',';
  color += ')';
  return color;
}
for(var i= 1 ; i  <=10 ; i++) {

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

}
document.write(html);

Answer 1 · 2016-08-05T08:45:58Z

August 5, 2016 8:45am

Hi Dan,

There are a couple of things that need tweaking with your code in order to make it work. Don't forget to use the developer tools - these should give you your first error at least!

So the first problem is that the variable 'color' is coming up as 'not defined'. This is because you have defined the variable inside your function rgbColor() (on line 12) and returned it, however when you call the function on line 16 you are not assigning the returned value to anything.

When you declare a variable inside a function, that variable is only visible within that function's 'scope', and when the function is finished, the variable will be removed from memory and so not exist any more. This is why we use the return keyword, to make sure we can send something back out of the function before it is removed from memory. If you change line 21 to

var color = rgbColor();

then your returned value will now be accessible outside of the function.

Next up, on line 15 you are appending an extra comma to the end of your rgb style. The correct format should be

rgb(xx, xx, xx);

so remove this and that style will apply correctly. You are also missing a semicolon from the 'style' declaration in your div, so make sure to include that in your string or the style won't work.

Last thing is that your divs are now being correctly rendered to the page, but where are they? In general, if you add an empty div to a page, it will have a default width and height of 0px, i.e. you won't see it. Saves pages getting cluttered if any extra divs are added but not used. My best advice would be to create a class, say '.square', and give this width and height of 100px in your css. Then make sure that the divs you are writing to the page have this class. Then you will see them!

That should do it. One last point, which is not a deal breaker, is that there isn't really any need to declare your randomColor() function inside of your rgbColor() function. Because of scoping, it means that you wouldn't be able to access randomColor() from the rest of your app. Like I say though, it's not a deal breaker, and you could even put it down to my stylistic preference!

I hope that this has helped, Chris

Answer 2 · 2016-08-05T08:53:08Z

August 5, 2016 8:53am

thanks

Welcome to the Treehouse Community

Looking to learn something new?

Dan Wahin

Dan Wahin

why does this code not function and can i have two return statements inside two seperate functions which are nested ..

2 Answers

Christopher Ford

Christopher Ford

Dan Wahin

Dan Wahin