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

我使用香草JavaScript创建了像素艺术制作工具，用户可以在该画板上绘制自己选择的颜色。我想添加一个按钮，以使单色填充网格。

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

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

我尝试将代码更改为原始javaScript，我想我只差了一行。

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

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

（这是我当前的完整代码供参考：CodePen）

最佳答案

您似乎要遍历所有这些对象：

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