添加事件监听器使内容消失答案

【问题标题】：Adding event listener makes content disappear添加事件监听器使内容消失
【发布时间】：2020-06-30 20:17:59
【问题描述】：

我正在尝试制作一个 etch-a-sketch 页面。这个想法是生成一个网格，每次鼠标悬停在每个正方形上时，它都会采用随机颜色。但是，当我向正方形添加事件侦听器时，网格会出现几毫秒然后消失。如果没有事件侦听器，网格看起来就很好，不会改变颜色。这是我的 JavaScript 函数：

function makeGrid() {

  const etch = document.getElementById("etchSpace");

  etch.innerHTML = "";

  const size = document.getElementById("inputField").value;

  const x = 550 / size;

  for (let i = 1; i <= size; i++) {;
    let row = document.createElement("div");
    row.setAttribute("style", "display: flex; flex-direction: row; border-bottom: 1px solid black; width: 550px");
    row.style.height = x + "px";
    row.id = "row" + i;

    document.getElementById("etchSpace").appendChild(row);

    for (let j = 1; j <= size; j++) {
      let columnPiece = document.createElement("div");
      columnPiece.setAttribute("style", "border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; background-color: lightgrey");
      columnPiece.style.height = x + "px";
      columnPiece.style.width = x + "px";
      columnPiece.id = "column" + i + j;

      document.getElementById("row" + i).appendChild(columnPiece);
    }
  }

  for (let i = 1; i <= size; i++) {
    for (let j = 1; j <= size; j++) {
      let element = document.getElementById("column" + i + j);

      element.addEventListener("mouseover", "element.style.background = random_rgba()");
    }
  }

  return false;
}

<form>
  <label for="fname">Grid size (max. 64):</label>
  <input type="text" id="inputField" name="fname"><br><br>
  <input type="submit" value="Generate" id="generateButton" onclick="return makeGrid();">
</form>

以下 for 破坏了我的代码：

for(let i = 1; i <= size; i++)
{
    for(let j = 1; j <= size; j++)
    {
        let element = document.getElementById("column" + i + j);

        element.addEventListener("mouseover", "element.style.background = random_rgba()");
    }
}

以下是我从中获取网格大小的 html 表单：

<form>
  <label for="fname">Grid size (max. 64):</label>
  <input type="text" id="inputField" name="fname"><br><br>
  <input type="submit" value="Generate" id = "generateButton" onclick = "return makeGrid();">
</form>

【问题讨论】：

没有直接回答你的问题，但是你这里多了一个分号：const x = 550 / size; for(let i = 1; i <= size; i++) {;
请注意，给出的代码不会复制所描述的问题，因为按钮是提交按钮，并且代码在到达return false; 行之前会引发错误。
element.addEventListener("mouseover", "element.style.background = random_rgba()");
请注意，因为您没有在 id 中分隔 i 和 j，所以当 i 为 11 且 j 为 1 时的 id 与 @ 时的 id 相同987654332@ 是 1，j 是 11。因此您有多个具有相同值的 id，这是无效的 HTML。

标签： javascript html

【解决方案1】：

为您的代码创建了这个代码笔：https://codepen.io/geuis/pen/wvMPoJa

问题在函数的第二行：

  const etch = document.getElementById("etchSpace");
  etch.innerHTML = "";

没有id为#etchSpace的元素。

在浏览器中调出开发工具并查看控制台。它会显示代码中的错误。

【讨论】：