javascript - 生成的按钮上的随机颜色

Question

我编写了一个代码，生成一个表格和 32 个按钮。 我有一个与每个按钮关联的 id。问题是，颜色也是随机生成的，仅插入到表格的第一个按钮上。 这怎么可能？

 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

您需要在 k 循环之前再次将 color var 重置为 #

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

在使用之前还需要声明idx

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

<小时/>

编辑

在按钮单击时实现背景颜色更改

全部完成后添加此代码

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