Random colors on generated buttons

Question

I made a code that generates me a table and 32 buttons. I have an id associated with each button. The problem is that, the color also generated randomly, is only inserted on the first button of the table. How is this possible?

 window.onload = function createTable()
 {
 var body=document.getElementsByTagName('body')[0];
 var tbl=document.createElement('table');
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';

 tbl.setAttribute('id', "tableID");

 var tbdy = document.createElement('tbody');          

 for(var i = 0; i < 4; i++) 
 {
     var tr = document.createElement('tr');               

     for(var j = 0; j < 8; j++)
     {
         var td = document.createElement('td');           
         var bt = document.createElement('button');       

         for (var k = 0; k < 6; k++)                    
         {
         color += letters[Math.round(Math.random() * 15)];
         }

         bt.id = "button" + idx;                            
         console.log("IDX: " + idx);             
         td.appendChild(bt);                           
         idx++;                          
                     tr.appendChild(td)                            
         console.log(bt);
         bt.style.background = color;
    }
    tbdy.appendChild(tr);
}

Answer 1

You need to reset color var to # again before k loop

color = '#';
for (var k = 0; k < 6; k++) 
....

Also you need to declare idx before using it

var idx = 0;
for(var j = 0; j < 8; j++)
....

---

EDIT

Implementing bg color change on button click

Add this code after all finished

var buttons = Array.prototype.slice.call(tbl.getElementsByTagName("button"));

buttons.forEach(function(btn){
   btn.addEventListener("click",function(){
       document.body.style.backgroundColor = btn.style.backgroundColor;
    });
});

UPDATED FIDDLE Based on Bhavik's Solution

Answer 2

Working Fiddle

@Batu has already mentioned the mistake of defining the color.....

Complete working code

 window.onload = function createTable() {
     var body = document.getElementsByTagName('body')[0];
     var tbl = document.createElement('table');
     var letters = '0123456789ABCDEF'.split('');
     var idx = 1;

     tbl.setAttribute('id', "tableID");

     var tbdy = document.createElement('tbody');

     for (var i = 0; i < 4; i++) {
         var tr = document.createElement('tr');

         for (var j = 0; j < 8; j++) {
             var td = document.createElement('td');
             var bt = document.createElement('button');

             var color = '#';
             for (var k = 0; k < 6; k++) {
                 color += letters[Math.round(Math.random() * 15)];
             }

             bt.id = "button" + idx;
             console.log("IDX: " + idx);
             td.appendChild(bt);
             idx++;
             tr.appendChild(td)
             console.log(color);
             bt.style.background = color;
         }
         tbdy.appendChild(tr);
     }
     tbl.appendChild(tbdy);
     body.appendChild(tbl);
 }  

---

Update working fiddle with click event listener on each button