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

Question

Есть пиксельная сетка (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

Завести внешнюю переменную, в которой будет храниться текущий выбранный цвет. И менять значение переменной при клике на палитру.
pix.style.backgroundColor = 'black'; → pix.style.backgroundColor = переменная;

let CURR_COLOR = "#ddd"; // Текущий цвет, серый по умолчанию.

create_table();
fill_palette_colors();
onclick_pick_color();
onclick_fill_pixel();

/***/
function create_table() {
  let table = document.querySelector(".table");
  let rows = 30;
  let cols = 30;
  
  table.innerHTML = ("<tr>" + "<td></td>".repeat(cols) + "</tr>").repeat(rows);
}

function fill_palette_colors() {
  let tools = document.querySelectorAll(".palette .tool");
  for (let i = 0; i < tools.length; i++) {
    tools[i].style.backgroundColor = tools[i].dataset.color;
  }
}

function onclick_pick_color() {
  // Обработчик клика добавляется на родительский элемент.
  // Это пригодится, если в будущем захочется сделать добавление/удаление цветов.

  let palette = document.querySelector(".palette");
  palette.addEventListener("click", function(e) {
    if (!e.target.classList.contains("tool")) return;
    // Если в классе кликнутого элемента нет tool, прервать функцию.

    CURR_COLOR = e.target.dataset.color;
    // dataset.color → то, что будет написано у кнопки в data-color в HTML

    palette.style.borderColor = CURR_COLOR; // Индикатор выбранного цвета.
  });
}

function onclick_fill_pixel() {
  let table = document.querySelector(".table");
  table.addEventListener("click", function(e) {
    if (e.target.tagName != "TD") return;

    e.target.style.backgroundColor = CURR_COLOR;
  });
}

.palette {
  display: inline-block;
  margin-bottom: 4px;
  border-bottom: 4px solid #ddd;
}

.tool {
  width: 40px;
  height: 40px;
  
  outline: none;
  border: none;
}

.table {
  border-collapse: collapse;
}

.table td {
  border: 1px solid #ddd;
  width: 10px;
  height: 10px;
}

<div class="palette">
  <button class="tool" data-color="#c00"></button>
  <button class="tool" data-color="#f70"></button>
  <button class="tool" data-color="#fc0"></button>
  <button class="tool" data-color="#0c0"></button>
  <button class="tool" data-color="#0ee"></button>
  <button class="tool" data-color="#169"></button>
  <button class="tool" data-color="#909"></button>
</div>

<table class="table"></table>

С зажатой мышью (события mousedown, mouseover) было бы удобнее красить, чем кликами)

БЛОГ НА HUSL

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

Ответы (1 шт):