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

您需要在color循环

之前再次将# var重置为k

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

此外，您需要在使用之前声明idx

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

修改

点击按钮时实施bg颜色更改

完成所有
后添加此代码
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已经提到了定义颜色的错误.....

完整的工作代码

 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);
 }

更新 working fiddle ，每个按钮上都有click个事件监听器

生成的按钮上的随机颜色

2 个答案: