动态创建css网格不返回nodelist答案

【问题标题】：Dinamically created css grid does not return nodelist动态创建css网格不返回nodelist
【发布时间】：2021-07-07 20:13:49
【问题描述】：

我一直在尝试获取动态创建的 html 节点列表，但是每当我尝试获取创建的节点时，列表都会返回 null。我正在尝试使用 querySelectorAll() ，然后使用 forEach 将EventListener 添加到每个按钮，这样我就可以在鼠标经过它们时更改每个按钮的背景颜色。我尝试将游戏用作 querySelector 而不是文档，但它根本不起作用。

我的 HTML：

  <body>
    <main class="game-container">
      <h1>ETCH-A-SKETCH</h1>
      <div class="game-canvas" id="sketch-canvas"></div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

我的 CSS：

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.game-container {
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game-canvas {
  margin-top: 25px;
  margin-right: 40px;
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  border: 5px solid black;
  border-radius: 5px;
  height: 575px;
  width: 575px;
}

我的javascript：

const game = document.getElementById("sketch-canvas");

function createGrid(rows, cols) {
  game.style.setProperty("--grid-rows", rows);
  game.style.setProperty("--grid-cols", cols);

  for (let i = 0; i < rows * cols; i++) {
    const span = document.createElement("span");
    span.classList.add("grid-item");
    game.appendChild(span);
  }
}

const spans = document.querySelectorAll(".grid-item");
console.log(spans);
spans.forEach(span => {
span.addEventListener("mousedown", (event) => {
  event.target.style.backgroundColor = random_rgba();
});

function random_rgba() {
  var o = Math.round,
    r = Math.random,
    s = 255;
  return (
    "rgba(" +
    o(r() * s) +
    "," +
    o(r() * s) +
    "," +
    o(r() * s) +
    "," +
    r().toFixed(1) +
    ")"
  );
}

【问题讨论】：

您在创建元素之前添加事件侦听器。尝试在createGrid函数内添加与事件监听器相关的代码
@Rojo 非常感谢你！如果您愿意，请将其作为答案提交，以便我给您适当的学分！

标签： javascript html css web dom

【解决方案1】：

您在创建元素之前添加事件侦听器。尝试在createGrid 函数中添加与事件监听器相关的代码：

function createGrid(rows, cols) {
  game.style.setProperty("--grid-rows", rows);
  game.style.setProperty("--grid-cols", cols);

  for (let i = 0; i < rows * cols; i++) {
    const span = document.createElement("span");
    span.classList.add("grid-item");
    game.appendChild(span);
    span.addEventListener("mousedown", (event) => {
      event.target.style.backgroundColor = random_rgba();
    });
  }
}

请注意，您甚至不需要 querySelectorAll 或 forEach

【讨论】：