此行是错误的，不会起作用：

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

这是试图访问 id 等于字符串“buttID”的按钮，但不存在这样的按钮。

但您根本不需要按钮上的 id。相反，您可以像这样设置按钮的 onclick 函数：

button.onclick = mark;

然后，像这样定义您的 mark 函数：

function mark() {
  let button = this; // 'this' is the button that was clicked
  button.style.color = 'red';
}

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'));
      button.className = 'btn';
      button.onclick = mark;
    }
  }
  puzzle.innerHTML = '';
  puzzle.appendChild(table);
}

function mark() {
  let button = this;
  button.style.backgroundColor = "red";
}

const puzzle = document.getElementById('puzzle');

.btn {
  border: none;
  margin: 0;
  width: 1em;
  height: 1em;
  background-color: white;
}
body {
  background-color: #eee;
}

<button onclick="createTable();">Create Table</button>
<div id="puzzle"></div>

将此：

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

您还必须编辑标记函数，使其看起来像这样：

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

这可能看起来令人困惑，您可能会问变量“e”来自哪里。基本上，像“onclick”这样的事件总是会将事件对象传递给它们的处理函数。通过将变量放在处理函数括号中，事件对象将自动放入该变量中。

事件对象包含大量有关事件的信息。您可以在 此处 看到它提供的所有信息。 我们想要的是“目标” - 触发事件的元素，在本例中将是被点击的任何按钮。 目标是一个 HTML 元素，因此我们可以将其 style.background 设置为“red”的值。