时间戳

首页 > 解决方案 > 动态创建的 css 网格不返回节点列表

javascript - 动态创建的 css 网格不返回节点列表

问题描述

我一直在尝试获取动态创建的 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) +
    ")"
  );
}

标签： javascripthtmlcsswebdom

解决方案

您在创建元素之前添加事件侦听器。尝试在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

推荐阅读