如何为Etch-A-Sketch网页画板实现点击清空画布的功能按钮

实现清空功能的修改方案 #

你只需要在现有JS代码末尾补充以下代码即可实现点击清空按钮重置所有网格颜色：

// 绑定清空按钮点击事件
const clearBtn = document.querySelector('.clear-button');
clearBtn.addEventListener('click', () => {
  // 遍历所有网格元素，移除背景色行内样式
  const allGrids = document.querySelectorAll('.table');
  allGrids.forEach(grid => grid.style.backgroundColor = '');
});

你猜想的逻辑完全正确，因为网格默认没有设置背景色，把行内设置的背景色属性置空就可以恢复初始状态。

如果需要同步完善调整网格大小的功能，可以再补充以下代码：

// 绑定resize按钮点击事件
const resizeBtn = document.querySelector('.resize');
resizeBtn.addEventListener('click', () => {
  const size = parseInt(resizeGrid());
  // 输入合法性校验
  if (isNaN(size) || size < 1 || size > 100) {
    alert('请输入1-100之间的有效数字');
    return;
  }
  // 清空原有网格
  container.innerHTML = '';
  // 生成新尺寸的网格
  makeTable(size, size);
  // 给新生成的网格重新绑定悬停上色事件
  const newGrids = document.querySelectorAll('.table');
  newGrids.forEach(element => {
    element.addEventListener('mouseover', (e) => {
      e.target.style.backgroundColor = randomColor();
    })
  });
})

内容的提问来源于stack exchange，提问作者Kelvin Gunawan