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

Posted by Elise St Hilaire
Elise St Hilaire
13,358 Points

My code looks exactly like the video, but for some reason it's not printing anything to the screen. 

var html = '';
var rgbColor;

function randomColor(){
  var color = 'rgb(';
  color += randomRGB + ',';
  color += randomRGB + ',';
  color += randomRGB + ')';
  return color;
}

function randomRGB(){
  return Math.floor(Math.random() * 256);
}


function print(message) {
  document.write(message);
}

for (var i = 0; i < 10; i += 1) {
  rgbColor = randomColor();
  html += '<div style="background-color:' + rgbColor + '"></div>';
}


print(html);

3 Answers

Gregory Ledger
Gregory Ledger
6,116 Points
Gregory Ledger
Gregory Ledger
6,116 Points

It's your punctuation:

This cleared JSLint's filter: 

for (var i = 0; i < 10; i += 1) {
  rgbColor = randomColor();
  html += '<div style="background-color: " + rgbColor + "" '></div>';
}
Elise St Hilaire
Elise St Hilaire
13,358 Points
Elise St Hilaire
Elise St Hilaire
13,358 Points

Thanks a bunch! I was wondering if it had to do with the punctuation marks.

When I try it your way, however, the console gives me the following error: unexpected token >. The first ">" is not counting as a part of the div tag. Any ideas how I can work around this issue?

Gregory Ledger
Gregory Ledger
6,116 Points
Gregory Ledger
Gregory Ledger
6,116 Points

My bad, should not have relied on JSLint, which liked the code above, even though it wasn't the right code. Sorry. This is right:

for (var i = 0; i < 10; i += 1) {
  rgbColor = randomColor();
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

Your code should display 10 grey circles. (At least it did from my workspace using your code above.) If you want colored circles, however, you need to change 

function randomColor(){
  var color = 'rgb(';
  color += randomRGB + ',';
  color += randomRGB + ',';
  color += randomRGB + ')';
  return color;
}

to

function randomColor(){
  var color = 'rgb(';
  color += randomRGB() + ',';
  color += randomRGB() + ',';
  color += randomRGB() + ')';
  return color;
}