javascript - 如何为一般元素设置背景颜色，然后通过一个事件(onclick)设置特定元素(同类)的背景颜色？

Question

所以我有这个 UltraTicTacToe 游戏，我正在用 HTML/CSS/JS 编码。它由表中表中的表组成。当您单击 X 或 O 时，我想要突出显示您应该进入的下一个 TicTacToe 牌 table /游戏。我想将突出显示的 table /游戏重置为白色并突出显示另一个 table /游戏。我目前正在尝试通过使用一个函数将所有表格的背景颜色设置为白色，然后将特定表格的背景颜色设置为黄色来实现这一点，但它拒绝为我工作......有什么想法吗？

function tableReset() {
  document.getElementByClassName('tabler').style.backgroundColor = 'white';
}

function hide1() {
  document.getElementById('o1').style.display = 'none';
}

function reSize1() {
  document.getElementById('x1').style.width = '100%';
}

function nextMove1() {
  document.getElementById('st1').style.backgroundColor = 'yellow';
}

<table class="tabler" id="st1">
  <tr class="topmid">
    <td>
      <button type="button" class="x" id="x1" onclick="hide1(); reSize1(); tableReset(); nextMove1();">X</button>
      <button type="button" class="o" id="o1" onclick="hide2(); reSize2(); tableReset(); nextMove1();">O</button>
    </td>

Here is a pic of the game look - UltraTICTACTOE

Answer 1

getElementsByClassName 返回一个 HTMLCollection。您可以使用 document.getElementsByClassName('tabler')[0] 获取它的第一个元素，也可以使用 getElementById。

function tableReset() {
  //document.getElementsByClassName('tabler')[0].style.backgroundColor = 'white';
  //or
  document.getElementById('st1').style.backgroundColor = 'white';
}

function hide1() {
  document.getElementById('x1').style.display = 'none';
}
function hide2() {
  document.getElementById('o1').style.display = 'none';
}
function reSize1() {
  document.getElementById('x1').style.width = '100%';
}
function reSize2() {
  document.getElementById('o1').style.width = '100%';
}

function nextMove1() {
  document.getElementById('st1').style.backgroundColor = 'yellow';
}

<table class="tabler" id="st1">
  <tr class="topmid">
    <td>
      <button type="button" class="x" id="x1" onclick="hide1(); reSize1(); tableReset(); nextMove1();">X</button>
      <button type="button" class="o" id="o1" onclick="hide2(); reSize2(); tableReset(); nextMove1();">O</button>
    </td>