javascript - 使用 Vanilla JS 用选定的颜色填充网格的所有单元格

Question

我使用原生 JavaScript 创建了一个像素艺术制作工具，用户可以在其中使用自己选择的颜色在网格上绘图。我想添加一个按钮，允许用单一颜色填充网格。

在我的项目的 jQuery 版本中，我通过以下方式实现了这一点:

 $(".quick-fill").click(function() {
   const color = $('.color-picker').val();
   pixelCanvas.children().find('td').css('background-color', color);
 });

我尝试将该代码更改为 vanilla javaScript，我认为我只差一行。

 quickFill.addEventListener('submit', function() {
   const color = document.querySelector('.color-picker').value;
   pixelCanvas.table.children.style('background-color', color); <- wrong!
 });

我如何选择网格的所有单元格并用颜色填充它们？

(这是我当前的完整代码以供引用:CodePen)

Answer 1

看起来您想遍历所有这些:

pixelCanvas.querySelectorAll('td').forEach(td => td.style.backgroundColor = color);

但是还有一个问题。 <input type="submit" class="quick-fill"在表单的之外。可能制作一个点击处理程序而不是提交处理程序:

quickFill.addEventListener('click', function() {
  const color = document.querySelector('.color-picker').value;
  pixelCanvas.querySelectorAll('td').forEach(td => 
    td.style.backgroundColor = color;
  );
});

https://codepen.io/anon/pen/vRJwOw