Question

我正在尝试制作一个可用于从中选择颜色的色样。我的想法是创建一个表，并让表的每个单元格成为一个按钮，用户可以从中单击以选择要使用的颜色。在这一点上，我甚至没有尝试给我的按钮任何功能，直到我能够确定它们正在生成我只是试图在此时布置表格并测试按钮是否附加到每个单元格。这就是innerHTML ='test'的原因。但是没有任何东西出现，所以我担心按钮没有正确附加。我对编码很陌生，并且宁愿暂时坚持使用香草JS。马洛

// get reference for the pixelPainter div
let body = document.getElementById('pixelPainter');

//create the color swatch
let swatch = document.createElement('table');
swatch.id = 'swatch_base';

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

//create columns and attach buttons to each cell so that the buttons can be selected to choose a color
for (var i = 0; i<10; i++){
    let cell = document.createElement('td');
    let colorButton = document.createElement('button');
    colorButton.className('colorChoice');
    colorButton.innerHTML('test'); // just trying to test for button
    cell.appendChild(colorButton);
    row.appendChild(cell);
}
swatch.appendChild(row);
}

body.appendChild(swatch);
swatch.setAttribute('border', '1');

Answer 1

试试这个https://jsfiddle.net/qnrra88L/

实际上，className和innerHTML不是函数，className也应该是classNames

更改这两行

colorButton.className('colorChoice');
colorButton.innerHTML('test');

作为

colorButton.classNames = 'colorChoice';
colorButton.innerHTML = 'test';

在动态创建的表的单元格内动态创建按钮

1 个答案: