我正在尝试向具有相同类的某些 div HTML 元素添加点击 eventListener
,但在游戏初始化时我无法点击我的单元格。我对 JS 很陌生。有什么建议或提示可以指引我正确的方向吗?
const cells = document.querySelectorAll(".cell");
let gameMark = function(cell) {
if (gameActive == true) {
let player = playerTurn();
let position = parseInt(cell.id[cell.id.length - 1]);
cell.innerText = player.symb;
boardArray.array[position] = player.symb;
gameWin();
gameTie();
}
};
cells.forEach(cell => cell.addEventListener('click', gameMark(cell)));
<strike>
<section id="board">
<div id="gameContainer">
<div id="row1">
<div id="cell_0" class="cell"></div>
<div id="cell_1" class="cell"></div>
<div id="cell_2" class="cell"></div>
</div>
<div id="row2">
<div id="cell_3" class="cell"></div>
<div id="cell_4" class="cell"></div>
<div id="cell_5" class="cell"></div>
</div>
<div id="row3">
<div id="cell_6" class="cell"></div>
<div id="cell_7" class="cell"></div>
<div id="cell_8" class="cell"></div>
</div>
</div>
</section>
</strike>
最佳答案
addEventListener
需要一个函数作为它的第二个参数。您正在传递函数调用的结果。
// calling the function--+
// |
cells.forEach(cell => cell.addEventListener('click', gameMark(cell)));
您需要更改 gameMark
以返回函数:
let gameMark = function(cell) {
return function () {
if (gameActive == true) {
let player = playerTurn();
let position = parseInt(cell.id[cell.id.length - 1]);
cell.innerText = player.symb;
boardArray.array[position] = player.symb;
gameWin();
gameTie();
}
}
};
或者在循环中使用匿名函数:
cells.forEach(cell => cell.addEventListener('click', function () {
gameMark(cell);
});
关于javascript - 将 addeventlistener 添加到节点列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62555114/