javascript - 无法将 eventListener 添加到通过 JavaScript 创建的 div

Question

我正在做一个 Etch-A-Scetch 项目。我创建了一个网格，其中包含一定数量的相同大小的正方形（用户可以输入应该显示的正方形数量）。为了创建正方形，我使用了 CSS 网格和 Javascript for 循环。现在我想添加事件侦听器，在移动每个 Square 时更改其背景。不幸的是，当我尝试添加一些时，它总是显示错误。当前代码没有显示错误，它只是不做任何事情。

方法 createSquares() 应该只创建正方形的数量并将其添加到 DOM。用户输入一个数量，例如10个，显示的方块是x方向10个，y方向10个-->总共100个方块。之后，我想添加一个事件监听器，它会改变用户悬停在方块上的背景颜色（背景颜色应该保持不变）。我很感谢任何帮助，因为我真的一无所知：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>

标签： javascriptdomevent-listener

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>