Javascript如何在单击时更改按钮的颜色？

我是Javascript新手。我想创建一个15x15的表格，满是按钮，并在单击每个按钮时将按钮的颜色更改为红色。桌子很好，但颜色不好

function createTable(){
    var table = document.createElement('table');
    for(var x = 0; x < 15; x++) {
        var row = table.insertRow();
        for(var y = 0; y < 15; y++) {
            var cell = row.insertCell();
            var button = cell.appendChild(document.createElement('button'));
            var buttID = String('butt' + '_' + x + '_' + y);
            button.setAttribute('id', 'buttID');
            button.setAttribute('onclick', 'mark()');
        }
    }
    document.getElementById('puzzle').appendChild(table);
}

function mark(){
    document.getElementById('buttID').style.color = "red";
}

---

也许我为每个单元格创建id的方式是错误的？这一点我不确定。

这一行是错误的，不起作用：

document.getElementById('buttID').style.color = "red";

尝试访问id等于字符串buttID的按钮，但没有此类按钮

但是按钮上根本不需要ID。相反，您可以如下设置按钮的onclick函数：

button.onclick = mark;

function mark(e){
    e.target.style.background = 'red';
}

然后，按如下方式定义标记函数：

button.onclick = mark;

function mark(e){
    e.target.style.background = 'red';
}

功能标记{ let button=this；//“this”是单击的按钮 button.style.color='red'； } 函数createTable{ var table=document.createElement'table'； 对于变量x=0；x<15；x++{ var行=table.insertRow； 对于变量y=0；y<15；y++{ var cell=row.insertCell； var button=cell.appendChilddocument.createElement'button'； button.className='btn'； button.onclick=标记； } } puzzle.innerHTML=； 拼图。附加子表； } 功能标记{ 让按钮=这个； button.style.backgroundColor=红色； } const puzzle=document.getElementById'puzzle'； .btn{ 边界：无； 保证金：0； 宽度：1米； 高度：1米； 背景色：白色； } 身体{ 背景色：eee； } 创建表 更改此项：

var cell = row.insertCell();
var button = cell.appendChild(document.createElement('button'));
var buttID = String('butt' + '_' + x + '_' + y);
button.setAttribute('id', 'buttID');
button.setAttribute('onclick', 'mark()');

为此：

var cell = row.insertCell();
// Store the reference to the actual button and not the cell that contains it
var button = document.createElement('button');
// Bind the onclick event of the button to your mark function
// Also remember that you only need the parenthesis if you are calling a function, here we are only passing it
button.onclick = mark;
// Add your button to your table cell
cell.appendChild(button);

您还必须编辑标记函数，使其如下所示：

button.onclick = mark;

function mark(e){
    e.target.style.background = 'red';
}

这似乎令人困惑，您可能会问变量“e”从何而来。基本上，“onclick”之类的事件总是将事件对象传递给它们的处理函数。通过将变量放入处理函数括号中，事件对象将自动放入该变量中

事件对象有很多关于事件的信息。您可以看到它提供的所有信息。 我们想要的是“target”——触发事件的元素，在本例中，它将是单击的任何按钮。

---

目标是一个HTML元素，因此我们可以将其style.background的值设置为“red”。

您尝试为每个单元格创建相同的id。首先，id必须是唯一的。你能添加一个codesanbox或类似的东西来最准确地了解问题所在吗？非常感谢@俞浩铮：非常欢迎你。你会接受这个答案吗？非常感谢！