javascript - 无法将事件监听器添加到通过 JavaScript 创建的 div

Question

我正在开发一个 Etch-A-Scetch 项目。我创建了包含一定数量相同大小的正方形的网格(用户可以输入应显示的正方形数量)。为了创建正方形，我使用了 CSS 网格和 Javascript for 循环。现在我想添加事件监听器，当移动到每个方 block 上时，它会改变它的背景。不幸的是，当我尝试添加一些内容时，它总是显示错误。当前的代码没有显示错误，它只是不执行任何操作。

createSquares() 方法应该只创建正方形并将其添加到 DOM 中。用户输入一个数量，例如 10，则显示的方 block 在 x 方向上为 10，在 y 方向上为 10 --> 总共形成 100 个方 block 。之后，我想添加一个事件监听器，它会更改用户悬停在其上的正方形的背景颜色(背景颜色应保持更改)。我很感谢您的帮助，因为我真的很无能:D

let squareDiv = document.querySelector('.squareDiv');
let squares = document.getElementById('#squares')
let squareAmount = 10;

function blackColor() {
  this.style.backgroundColor = '#000';
  this.style.border = '0px';
}

function createSquares() {
  for (i = 0; i < squareAmount * squareAmount; i++) {
    squares = document.createElement('div');
    squares.setAttribute("id", "squares");
    // squares.setAttribute("onmouseover",  "addEventListener")
    squares.style.display = 'grid';
    squareDiv.style.setProperty('--columns-amount', squareAmount);
    squareDiv.style.setProperty('--rows-amount', squareAmount);
    squareDiv.appendChild(squares);
  }
}
createSquares();

if (squares) {
  squares.addEventListener('mouseover', _ => {
    squares.style.backgroundColor = blackColor;
  });
}

<div class="squareDiv"></div>
<div id="squares"></div>

Answer 1

你可能需要这样的东西

我修复了脚本，现在修复 CSS

let container = document.getElementById("container")
let squareAmount = 5;

function getRandom() {
  return '#'+Math.floor(Math.random()*16777215).toString(16);
}

function colorIt(sq) {
  sq.style.backgroundColor = document.getElementById("random").checked? getRandom() : '#000';
  sq.style.border = '0px';
}

function createSquares() {
  let grid = document.createElement('div');
  grid.setAttribute("id","squares")
  grid.classList.add("grid");
  for (i = 0; i < squareAmount * squareAmount; i++) {
    square = document.createElement('div');
    square.classList.add("square");
    grid.appendChild(square);
  }
  container.innerHTML="";
  container.appendChild(grid)
}
createSquares();

container.addEventListener('mouseover',
  e => {
    const target = e.target;
    if (target.matches(".square")) colorIt(target)
  }
);

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-auto-rows: 1fr;
}

.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

/* Just to make the grid visible */

.grid > * {
  background: rgba(0,0,0,0.1);
  border: 1px white solid;
}

<label><input type="checkbox" id="random" />Random</label>
<div id="container"></div>