@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';
  }
}

pN0vA.png
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
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;
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽