Как выбрать цвет из палитры и сменить фон ячейки по клику?

Question

[Blackkarma]

Есть пиксельная сетка (table, каждый пиксель с классом .pixel) и палитра уже заготовленных цветов в виде кнопок (button с классами .tool и .название цвета). Как правильно написать js-код, чтобы при клике на палитру выбирался цвет и при клике на сетку background-color выбранного .pixel становился нужного цвета?

Пока только до такого додумалась:

let pixels = document.querySelectorAll('.pixel');
for(let pix of pixels) {
  pix.onclick = function() {    
    pix.style.backgroundColor='black';
  }
}

Answer 1

[0xD34F]

button с классами .tool и .название цвета

Повелеваю: цвет унести в data-атрибут.

let color = '#000';

document.querySelector('селектор контейнера с кнопками').addEventListener('click', e => {
  if (e.target.classList.contains('tool')) {
    color = e.target.dataset.color;
  }
});

document.querySelector('селектор контейнера с "пикселями"').addEventListener('click', e => {
  if (e.target.classList.contains('pixel')) {
    e.target.style.backgroundColor = color;
  }
});