将事件侦听器添加到多个生成的元素

Question

我正在尝试使用纯 JS 并基于 CSS 和 HTML GUI 为我的学校制作 Tic-Tac-Toe。我知道这可能不是最好的方法，但我认为它可能有效。不幸的是，它根本不起作用。

我尝试在 Board.generate() 中通过 JS 生成整个板，因为我想让我的板可调整大小，然后向每个生成的单元格添加事件侦听器，但这不是& #39；不工作。 Onclick 仅在最后一个元素上调用，而不在前面的元素上调用。我认为我可以通过创建一个函数来绕过这个问题，但我想了解为什么我的代码不起作用。

这是我的代码：

class Board {

  constructor(size) {

    this.size = size;

 

    this.cells = [];

    for (let x = 0; x < size; x++) {

      this.cells[x] = [];

      for (let y = 0; y < size; y++) {

        this.cells[x][y] = new Cell(x, y, null);

      }

    }

  }

 

  generate() {

    document.getElementById('game').innerHTML = '<div id="board"></div>';

 

    let boardEl = document.getElementById('board');

 

    for (let y = 0; y < this.size; y++) {

      boardEl.innerHTML += '<div id="r' + y + '" class="board-row"></div>';

      let rowEl = document.getElementById('r' + y);

 

      for (let x = 0; x < this.size; x++)

        this.cells[x][y].addElement(rowEl);

    }

  }

}

 

class Cell {

  constructor(x, y, mark) {

    this.x = x;

    this.y = y;

    this.mark = mark;

    this.id = 'c' + x + y;

    this.element = null;

  }

 

  addElement(rowEl) {

    rowEl.innerHTML += '<div id="' + this.id + '" class="board-cell"> CELL </div>';

    this.element = document.getElementById(this.id);

    this.element.addEventListener('click', () => this.clicked(), false);

  }

 

  clicked() {

    console.log(this.x, this.y, ' CLICKED!');

  }

}

 

window.onload = function () {

  var game = new Board(3);

  game.generate();

};

<style>

  .board-cell {

    width: 10%;

    height: 10%;

    background: white;

    color:black;

  }

</style>

<div id="container" class="fullscreen">

  <div id="game" class="fullscreen">

    <!-- Generated board -->

  </div>

</div>

我知道我的代码现在一团糟，但我只是感到沮丧，而且这只是一个草图，我会继续努力。 另外，如果我犯了一些错误，我很抱歉我的英语。

Answer 1

任何时候设置 innerHTML 属性都会覆盖之前设置的任何 HTML。这包括串联赋值，因为element.innerHTML += '<b>Hello</b>';和写作一样element.innerHTML = element.innerHTML + '<b>Hello</b>';这意味着所有未通过 HTML 属性附加的处理程序都将被“分离”，因为它们附加的元素不再存在，并且一组新的元素已取代它们。要保留所有以前的事件处理程序，您必须附加元素而不覆盖任何以前的 HTML。最好的方法是使用 DOM 创建函数，例如 createElement 和appendChild：let divEl&nbsp; = document.createElement("div");divEl.innerHTML = "CELL";&nbsp; &nbsp;divEl.className = 'board-cell'divEl.id = this.id;rowEl.appendChild(divEl);对于行 div 元素也是如此：let divRowEl&nbsp; = document.createElement("div");divRowEl.className = 'board-row'divRowEl.id = 'r' + y;boardEl.appendChild(divRowEl);class Board {&nbsp; constructor(size) {&nbsp; &nbsp; this.size = size;&nbsp;&nbsp; &nbsp; this.cells = [];&nbsp; &nbsp; for (let x = 0; x < size; x++) {&nbsp; &nbsp; &nbsp; this.cells[x] = [];&nbsp; &nbsp; &nbsp; for (let y = 0; y < size; y++) {&nbsp; &nbsp; &nbsp; &nbsp; this.cells[x][y] = new Cell(x, y, null);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp; generate() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.getElementById('game').innerHTML = '<div id="board"></div>';&nbsp;&nbsp; &nbsp; let boardEl = document.getElementById('board');&nbsp;&nbsp; &nbsp; for (let y = 0; y < this.size; y++) {&nbsp; &nbsp; &nbsp; let divRowEl&nbsp; = document.createElement("div");&nbsp; &nbsp; &nbsp; divRowEl.className = 'board-row'&nbsp; &nbsp; &nbsp; divRowEl.id = 'r' + y;&nbsp; &nbsp; &nbsp; boardEl.appendChild(divRowEl);&nbsp; &nbsp; &nbsp; let rowEl = document.getElementById('r' + y);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; for (let x = 0; x < this.size; x++)&nbsp; &nbsp; &nbsp; &nbsp; this.cells[x][y].addElement(rowEl);&nbsp; &nbsp; }&nbsp; }}&nbsp;class Cell {&nbsp; constructor(x, y, mark) {&nbsp; &nbsp; this.x = x;&nbsp; &nbsp; this.y = y;&nbsp; &nbsp; this.mark = mark;&nbsp; &nbsp; this.id = 'c' + x + y;&nbsp; &nbsp; this.element = null;&nbsp; }&nbsp;&nbsp; addElement(rowEl) {&nbsp; &nbsp; let divEl&nbsp; = document.createElement("div");&nbsp; &nbsp; divEl.innerHTML = "CELL" + this.id;&nbsp; &nbsp;&nbsp; &nbsp; divEl.className = 'board-cell'&nbsp; &nbsp; divEl.id = this.id;&nbsp; &nbsp; divEl.addEventListener('click', () => this.clicked(), false);&nbsp; &nbsp; rowEl.appendChild(divEl);&nbsp; }&nbsp;&nbsp; clicked() {&nbsp; &nbsp; console.log(this.x, this.y, ' CLICKED!');&nbsp; }}&nbsp;window.onload = function () {&nbsp; var game = new Board(3);&nbsp; game.generate();};<style>&nbsp; .board-cell {&nbsp; &nbsp; width: 10%;&nbsp; &nbsp; height: 10%;&nbsp; &nbsp; background: white;&nbsp; &nbsp; color:black;&nbsp; }</style><div id="container" class="fullscreen">&nbsp; <div id="game" class="fullscreen">&nbsp; &nbsp; <!-- Generated board -->&nbsp; </div></div>