Trying to create and update a table of random colors

Question

First, I am trying to crash course javascript, so please note I am still limited in my understanding of its syntax.

I need to create a table of 28 random colors, and then update it with each click of a button. I would like to create the table on the same page as the button, but I can only seem to get this to work when using document.write, which then writes to a new page with the table.

Any help cleaning up my code would be appreciated. Thanks!

<head>
<title>Random Color Generator</title>
</head>

<body>
<h2>Random World Generator</h2>
<button id="rcg_generate_button" onclick="rcg_generate()">Generate</button>

<script type="text/javascript">

// Counters 
var i = 0;
var j = 0;
var k = 0;

var x = 0;
var y = 0;
var z = 0;

// Define range for percentage of color
var min = 0;
var max = 5;

// RGB values
var r;
var g;
var b;

//Misc Vars
var color;
var display_color;
var stored_colors = new Array();
var shades = new Array('00','33','66','99','CC','FF');


//Generate Color Table
function rcg_generate() {
    while (i <= 27) {
        r = Math.round(Math.random() * (max-min) + min);
            g = Math.round(Math.random() * (max-min) + min);
        b = Math.round(Math.random() * (max-min) + min);

        color = shades[r] + shades[g] + shades[b];

        stored_colors[i] = color;

        i++;

    }


    document.write('<table cellspacing="0" id="grid">');

    for (k = 0; k <= 3; k++) {
        document.write('<tr>');
            for (j = 0; j <= 6; j++) {
                display_color = stored_colors[x]
                document.write('<td style="background: #'+display_color+'; height: 30px; width: 75px;">');
                document.write('<p align = "center">'+display_color+'<\/p>');
                document.write('<\/td>');
                x++;
            }
        document.write('<\/tr>');
    }
    document.write('<\/table>');

}

</script>

</body>
</html>

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice http://javascript.info/tutorial/document-write — Patashu, Jun 12 '13 at 04:07

score 1 · Accepted Answer · answered Jun 12 '13 at 06:38

1

Build you table in HTML, then in your JS select all the td elements and change their background colors :

  function colors () { 
    [].slice.call (document.querySelectorAll ('#colors td')). forEach (function (tdEl) {
      var r = Math.round (Math.random () * (max - min) + min),
          g = Math.round (Math.random () * (max - min) + min),
          b = Math.round (Math.random () * (max - min) + min);

      tdEl.style.backgroundColor = '#' + shades[r] + shades[g] + shades[b];
    });
  }    

  button.addEventListener ('click', colors, false);

See a demo at http://jsfiddle.net/jstoolsmith/zzzUd/

answered Jun 12 '13 at 06:38

HBP

14,098
4
25
33

Thank you for the response. Few things I am not familiar with (ie: slice.call), thankfully I am finding articles on here that go over it though. – Chad Blackford Jun 13 '13 at 17:53
Its the best way to learn. Validate my answer if it has helped. – HBP Jun 13 '13 at 20:54

Trying to create and update a table of random colors

1 Answers1