javascript - 无法弄清楚为什么我的脚本停止工作。 .

Question

我正在制作一个简单的 eclipse 刻草图程序。我有 2 个按钮。 1 重置屏幕，另一个创建新屏幕并让您选择绘图区域中的像素数。默认大小有效，重置有效。当我单击新按钮并设置绘图区域更新的像素数时，事件监听器停止工作并且鼠标悬停不会再更改 div 的背景颜色。这是我的代码:

const screen = document.querySelector('.screen')
const clearButton = document.querySelector('.clear-btn');
const newButton = document.querySelector('.new-btn');
var size = 64;

function createGrid(size) {
  document.styleSheets[0].cssRules[3].style["grid-template-columns"] = "repeat(" + size + ", 1fr)"
  document.styleSheets[0].cssRules[3].style["grid-template-rows"] = "repeat(" + size + ", 1fr)"
  console.log('createGrid');
  for (i = 0; i < size*size; i++) { 
    const grid = document.createElement('div');
    grid.classList.add('grid');
    grid.style.cssText = 'color: #cccccc; background: #cccccc; border: solid 1px lightgrey;';      
    screen.appendChild(grid);
  }
}

function reset() {
  for (i = 0; i < size*size; i++) { 
  grid[i].style.backgroundColor = "#cccccc";
  }
}

function newSize(){
  let userResponse = prompt("Please enter size of canvas: ", "");
  size = parseInt(userResponse);
  remove();
  createGrid(size);
}


function remove(){
  while (screen.firstChild) {
    console.log(size);
    screen.removeChild(screen.firstChild);
  }
}

createGrid(size);

clearButton.addEventListener('click', reset);
newButton.addEventListener('click', newSize);

var grid = document.getElementsByClassName('grid');
Array.from(grid).forEach((tile) => {
  tile.addEventListener('mouseover', (e) => {
    e.target.style.background = '#0d0d0d';

  });
})

Answer 1

您需要在创建网格时添加事件监听器。您删除了您的网格，事件原始事件监听器已附加到该网格，而新创建的网格没有附加任何内容:

function createGrid(size) {
  document.styleSheets[0].cssRules[3].style["grid-template-columns"] = "repeat(" + size + ", 1fr)"
  document.styleSheets[0].cssRules[3].style["grid-template-rows"] = "repeat(" + size + ", 1fr)"
  console.log('createGrid');
  for (i = 0; i < size*size; i++) { 
    const grid = document.createElement('div');
    grid.classList.add('grid');
    grid.style.cssText = 'color: #cccccc; background: #cccccc; border: solid 1px lightgrey;';      
    screen.appendChild(grid);

    // Add listener to grid cell
    grid.addEventListener('mouseover', (e) => {
       e.target.style.background = '#0d0d0d';
    })
  }
}

您也可以看看 event delegation这样您就不必为每个单元格添加一个监听器，而是可以将其添加到容器中。