将 addeventlistener 添加到节点列表

Question

我正在尝试向具有相同 class 的某些 div HTML 元素添加点击 eventListener，但是在游戏初始化时我无法点击我的单元格.我是 JS 的新手。有什么建议或暗示可以指出我正确的方向吗？ T

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>

Answer 1

addEventListener 需要一个函数作为它的第二个参数。您正在传递函数调用的结果。

                                // calling the function--+ 
                                //                       |
cells.forEach(cell => cell.addEventListener('click', gameMark(cell)));

您需要将 gameMark 更改为 return 函数：

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

将 addeventlistener 添加到节点列表

Add addeventlistener to a nodelist

javascript

javascript-objects

dom-events