我应该如何访问 DOM 元素并希望循环并在板上添加 X 或 O

Question

每当用户单击板上的任何单元格时，我只想在板上添加 X 或 O。

类单元格的 X 和项目的 X 仅用于实验。

通过placeMark功能将 X 或 O 标记在板上

 let x = 'X' let o = 'O' let xTurn = true const board = document.getElementById("board") const cell = document.getElementsByClassName("cell") cell.forEach(cell => { cell.classList.remove(x) cell.classList.remove(o) cell.removeEventListener('click', handleClick) cell.addEventListener('click', handleClick, { once: true }) }) function handleClick(e) { const cell = e.target const currentClass = xTurn ? x : o placeMark(cell, currentClass) } function placeMark(cell, currentClass) { cell.classList.add(currentClass) }

 <div class="board" id="board"> <div class="cell x" id="item 1"></div> <div class="cell" id="item 2"></div> <div class="cell" id="item 3"></div> <div class="cell" id="item 4"></div> <div class="cell" id="item 5"></div> <div class="cell" id="item 6"></div> <div class="cell" id="item 7"></div> <div class="cell" id="item 8"></div> <div class="cell" id="item 9"></div> </div>

已编辑！！

我正在使用 VS 代码。

Answer 1

首先，您的 id 重复，这不是很好，您可以使用：

const cell = document.getElementsByClassName("cell");

Answer 2

正如@GMCgit 提到的，您的 ID 不是唯一的。 不允许在id属性中使用空格，因此必须将其更改为id="item-1"或类似内容。

此外，您的情况下的cell是 HTMLCollection。 .forEach是一种用于数组的方法。 如果要将单元格存储在数组中，最好使用.querySelectorAll('.cell') 。

此外，您不会在任何地方切换xTurn 。 请注意，您的X和O是大写的，因此您必须在 CSS 中使用大写的“X”和“O”。

我添加了一个带有一点 CSS 的工作示例只是为了显示效果。

 let x = 'X' let o = 'O' let xTurn = true const board = document.getElementById("board") const cells = document.querySelectorAll(".cell") cells.forEach(cell => { cell.classList.remove(x, o) cell.addEventListener('click', handleClick, { once: true }) }) function handleClick(e) { const cell = e.target; const currentClass = xTurn ? x : o; placeMark(cell, currentClass); xTurn = !xTurn; } function placeMark(cell, currentClass) { cell.classList.add(currentClass) }

 .board { display: flex; flex-wrap: wrap; width: 306px; } .cell { position: relative; width: 100px; height: 100px; border: 1px solid #000; } .cell:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; } .cell.X:after { content: 'X'; } .cell.O:after { content: 'O'; }

 <div class="board" id="board"> <div class="cell" id="item-1"></div> <div class="cell" id="item-2"></div> <div class="cell" id="item-3"></div> <div class="cell" id="item-4"></div> <div class="cell" id="item-5"></div> <div class="cell" id="item-6"></div> <div class="cell" id="item-7"></div> <div class="cell" id="item-8"></div> <div class="cell" id="item-9"></div> </div>

我删除了不必要的代码，以便演示工作。