Как запретить изменение цвета div, если другой уже такого цвета?

Question

Есть шахматная доска. Надо запретить изменение цвета клетки на красный, если одна из клеток с фигурой уже выбрана.

Написал такой код:

var id_focus = "";
const handleClick = event => {
  const id = event.target.closest('div.square').id;
  const obj = document.getElementById(id);
  if ((id[2] == 0) && (obj.innerHTML.length != 0) && (id_focus.length == 0)) {
    obj.style.backgroundColor = "red";
    let id2 = id[0] + id[1] + 1;
    obj.id = id2;
    id_focus = id2;
  } else {
    let row = Number(id[0]);
    let column = Number(id[1]);
    if ((row + column) % 2 == 0) {
      obj.style.backgroundColor = "white";
    } else {
      obj.style.backgroundColor = "brown";
    }
    let id2 = id[0] + id[1] + 0;
    obj.id = id2;
    id_focus = "";
  }
}

function build_chess() {
  var row, column;
  var square;
  var container = document.getElementById("container");
  for (row = 0; row < 8; ++row) {
    for (column = 0; column < 8; ++column) {
      square = document.createElement("div");
      square.id = String(row) + String(column) + String(0);
      if ((row + column) % 2 == 0) {
        square.style.backgroundColor = "white";
      } else {
        square.style.backgroundColor = "brown";
      }
      square.classList.add("square");
      switch (row) {
        case 0:
          switch (column) {
            case 0:
            case 7:
              square.innerHTML = "<img src='content/lad_black.png'></img>";
              break;
            case 1:
            case 6:
              square.innerHTML = "<img src='content/kon_black.png'></img>";
              break;
            case 2:
            case 5:
              square.innerHTML = "<img src='content/slon_black.png'></img>";
              break;
            case 3:
              square.innerHTML = "<img src='content/ferz_black.png'></img>";
              break;
            case 4:
              square.innerHTML = "<img src='content/king_black.png'></img>";
              break;
          }
          break;
        case 1:
          square.innerHTML = "<img src='content/pesh_black.png'></img>";
          break;
        case 6:
          square.innerHTML = "<img src='content/pesh_white.png'></img>";
          break;
        case 7:
          switch (column) {
            case 0:
            case 7:
              square.innerHTML = "<img src='content/lad_white.png'></img>";
              break;
            case 1:
            case 6:
              square.innerHTML = "<img src='content/kon_white.png'></img>";
              break;
            case 2:
            case 5:
              square.innerHTML = "<img src='content/slon_white.png'></img>";
              break;
            case 3:
              square.innerHTML = "<img src='content/ferz_white.png'></img>";
              break;
            case 4:
              square.innerHTML = "<img src='content/king_white.png'></img>";
              break;
          }
          break;
      }
      container.appendChild(square);
    }
  }
}
build_chess()
document.getElementById("container").addEventListener("click", handleClick)

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 570px) {
  #container {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    border: 12px solid black;
    border-radius: 6px;
    height: 400px;
    transform: scale(1.5);
  }
  .square {
    height: 50px;
    width: 50px;
  }
  .square img {
    height: 50px;
    width: 50px;
  }
}

@media (max-width: 570px) {
  #container {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    border: 6px solid black;
    border-radius: 3px;
    height: 200px;
    transform: scale(1.7);
  }
  .square {
    height: 25px;
    width: 25px;
  }
  .square img {
    height: 25px;
    width: 25px;
  }
}

<div id="container"></div>

При выделении одного div цвет другого в первый раз не меняется, но если нажать 2 раза, то он тоже становится красным. Как с этим быть?

Скрины:

Ожидаемый результат после 2х и более кликов по не выбранной клетке:

Получаемый:

Answer 1

нужно по клику красить все ячейки в дефолтный цвет, а выбранную ячейку красить в красный, если я правильно понял задание

Answer 2

Всё, сам нашёл ошибку

var id_focus = "";
const handleClick = event => {
  const id = event.target.closest('div.square').id;
  const obj = document.getElementById(id);
  if ((id[2] == 0) && (obj.innerHTML.length != 0) && (id_focus.length == 0)) {
    obj.style.backgroundColor = "red";
    let id2 = id[0] + id[1] + 1;
    obj.id = id2;
    id_focus = id2;
  } else if ((id[2] != 0)) {
    let row = Number(id[0]);
    let column = Number(id[1]);
    if ((row + column) % 2 == 0) {
      obj.style.backgroundColor = "white";
    } else {
      obj.style.backgroundColor = "brown";
    }
    let id2 = id[0] + id[1] + 0;
    obj.id = id2;
    id_focus = "";
  }
}

function build_chess() {

  var row, column;
  var square;
  var container = document.getElementById("container");

  for (row = 0; row < 8; ++row) {
    for (column = 0; column < 8; ++column) {
      square = document.createElement("div");
      square.id = String(row) + String(column) + String(0);
      if ((row + column) % 2 == 0) {
        square.style.backgroundColor = "white";
      } else {
        square.style.backgroundColor = "brown";
      }
      square.classList.add("square");
      switch (row) {
        case 0:
          switch (column) {
            case 0:
            case 7:
              square.innerHTML = "<img src='content/lad_black.png'></img>";
              break;
            case 1:
            case 6:
              square.innerHTML = "<img src='content/kon_black.png'></img>";
              break;
            case 2:
            case 5:
              square.innerHTML = "<img src='content/slon_black.png'></img>";
              break;
            case 3:
              square.innerHTML = "<img src='content/ferz_black.png'></img>";
              break;
            case 4:
              square.innerHTML = "<img src='content/king_black.png'></img>";
              break;
          }
          break;
        case 1:
          square.innerHTML = "<img src='content/pesh_black.png'></img>";
          break;
        case 6:
          square.innerHTML = "<img src='content/pesh_white.png'></img>";
          break;
        case 7:
          switch (column) {
            case 0:
            case 7:
              square.innerHTML = "<img src='content/lad_white.png'></img>";
              break;
            case 1:
            case 6:
              square.innerHTML = "<img src='content/kon_white.png'></img>";
              break;
            case 2:
            case 5:
              square.innerHTML = "<img src='content/slon_white.png'></img>";
              break;
            case 3:
              square.innerHTML = "<img src='content/ferz_white.png'></img>";
              break;
            case 4:
              square.innerHTML = "<img src='content/king_white.png'></img>";
              break;
          }
          break;
      }
      container.appendChild(square);
    }
  }
}

build_chess()
document.getElementById("container").addEventListener("click", handleClick)

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 570px) {
  #container {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    border: 12px solid black;
    border-radius: 6px;
    height: 400px;
    transform: scale(1.5);
  }
  .square {
    height: 50px;
    width: 50px;
  }
  .square img {
    height: 50px;
    width: 50px;
  }
}

@media (max-width: 570px) {
  #container {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    border: 6px solid black;
    border-radius: 3px;
    height: 200px;
    transform: scale(1.7);
  }
  .square {
    height: 25px;
    width: 25px;
  }
  .square img {
    height: 25px;
    width: 25px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Шахматная доска</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>
  <script src="js.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как запретить изменение цвета div, если другой уже такого цвета?

Скрины:

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