通过 JavaScript 将类添加到 HTML 元素时遇到问题

Question

我在井字游戏中通过 JavaScript 将类添加到 HTML 元素时遇到问题。

const cellElements = document.querySelectorAll("[data-cell]");

let isCircleTurn;

const handleClick = (e) => {
  //Put mark(X or Circle)
  const cell = e.target;
  const currentClass = circleTurn ? "circle" : "x";
  cell.classList.add(currentClass);
};

cellElements.forEach((cell) => {
  cell.addEventListener("click", handleClick, {
    once: true
  });
});

<div class="table circle">
  <div class="cell x" data-cell></div>
  <div class="cell circle" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
  <div class="cell" data-cell></div>
</div>your text

我正在创建一个井字游戏，我想通过类添加 X 和 O，但是，我的 JavaScript 代码没有更改类。我已经通过ChatGPT寻找代码的修正，但无法解决。

Answer 1

看起来你的 JavaScript 代码中有一个小错误。在您的 handleClick 函数中，您使用了一个变量 isCircleTurn，但您没有在任何地方定义它。相反，您应该使用您之前定义的变量 circleTurn。

这是您的 handleClick 函数的更正代码

此外，您可能还想在 handleClick 函数末尾切换 isCircleTurn 的值，以在 X 和 O 玩家之间切换回合。