Question

I’m trying to create 64 squares and give each a unique background color. I’m pretty close, but I can only seem to get one random color.

function randomCol() {
    return Math.floor(Math.random()*16777215).toString(16); 
}

$(function(){
  for(i=0; i<64; i++) {
        $('<div class="square"></div>').insertAfter(".starter");
        $(".square").css({'background':'#' + randomCol()});
  }
 });

Answer 1

$(".square") selects all existing elements with class square, so you are assigning the same color to each element.

You only want to assign the color to the just created one:

$('<div class="square"></div>')
   .css('background', '#' + randomCol())
   .insertAfter(".starter");

---

Two suggestions:

• Create the DOM node only once and clone it (might not actually be an improvement, you have to try).
• Insert the elements all at once to avoid multiple page reflows.

$(function(){
    var $node = $('<div class="square"></div>'),
        $elements = $();
    for(i=0; i<64; i++) {
        $elements = $elements.add($node.clone().css('background','#' + randomCol()));
    }
    $('.starter').after($elements);
});