Struggling with JavaScript please help?

Hey Rachel,

I'm not sure where you got the idea to use a canvas, but it isn't needed for this experiment. In fact, no HTML needs to be in the body of the document because when you use document.write() (the first time) it overwrites any HTML previously on the document, which means it destroys the canvas. All subsequent calls to document.write() will append data to the document.

Also, I had to fix a few things in your JavaScript so that the divs will even show up. Your html variable should be an empty string; this is mostly because you are using it as a string type in the for loop. But also, html will be undefined after the for loop executes because document.write will have overwritten and destroyed the canvas and so the html variable would have nowhere to point to (even though if it weren't destroyed it would still be incorrect).

When you are making divs that have no text content, you have to specify a width and height in order for the div to show up. If you make the width and height the same and set the border radius to 100%, you end up with a perfect circle. :)

I deleted the line below the document.write() function as it didn't do anything because there is no function called "randomRGB". I added an inline onclick event handler that calls an extra function that changes the color of each div. It sends the value of the this keyword to the function, which will be the object's reference, when it is called in this way. changeColor() is almost the same as the for loop except that we aren't creating any divs; we're modifying the already created divs. Run this in your web console (or paste into your page) and you can see it in action:

//Combine var initialization to save some space :P
var html = '', red, green, blue, rgbColor;

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

//This new function gets the element that called and sets its background to a random background when clicked           
function changeColor(element) {
    red = randomColor();
    green = randomColor();
    blue = randomColor();
     rgbColor =  'rgb(' + red + ',' + green + ',' + blue + ')';
    element.style.backgroundColor = rgbColor;
}

for(var i = 0; i < 100; i += 1){
    red = randomColor();
    green = randomColor();
    blue = randomColor();
    rgbColor =  'rgb(' + red + ',' + green + ',' + blue + ')';
    html += '<div onclick="changeColor(this)" style="border-radius:100%;width:50px;height:50px;background-color:'+rgbColor+'"></div>';
}
document.write(html);