Question

我使用vanilla 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

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

1 个答案: