Вывести фигуры и по клику менять цвета

Question

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

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

function Func() {
  const div = document.getElementById("tpl");
  const clone = div.cloneNode(true);
  clone.id = "tpl";
  document.body.appendChild(clone);
};

button {
  position: absolute;
  top: 30px;
  right: 30px;
  font-weight: bold;
}

button:hover {
  color: blue;
  cursor: pointer;
}

#tpl {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px 5px;
  background-color: red;
  cursor: pointer;
}

<div id="tpl"></div>
<button id="btn" onclick="Func()">Добавить</button>

Answer 1

Что-то такое?

const main = document.getElementById('main');
const btn = document.getElementById('add-block');
const blocks = document.querySelectorAll('.block');

for (let block of blocks) {
  block.addEventListener('click', changeColor);
}

btn.addEventListener('click', () => {
  let block = document.createElement('div');
  block.className = 'block';
  block.addEventListener('click', changeColor);
  main.append(block);
})

function changeColor() {
  let redBlocks = document.querySelectorAll('.block.green');
  this.classList.toggle('green');
  for (let block of redBlocks) {
    block.classList.remove('green');
  }
}

.block {
  widtH: 75px;
  height: 75px;
  margin: 20px;
  background-color: red;
}

.green {
  background-color: green;
}

#main {
  display: flex;
  flex-wrap: wrap;
}

<div id="main">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<button id="add-block">Add</button>

Answer 2

function onSquareClick() {
  this.classList.toggle("green");
  document.querySelectorAll(".square.green").forEach(s => {
    if (s !== this) s.classList.remove("green");
  });
}

let num_sq = prompt("Введите кол-во квадратов: ", 5);
for (let i = 0; i < num_sq; i++) {
  let div = document.createElement("div");
  div.className = "square";
  div.addEventListener("click", onSquareClick);
  document.body.appendChild(div);
}

.square {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px 5px;
  background-color: red;
  cursor: pointer;
}

.green {
  background-color: green;
}

Answer 3

const Boxes = document.querySelectorAll('.box');
Boxes.forEach(box => {
    box.addEventListener('click', () => {
        Boxes.forEach(box => {
            box.style.backgroundColor = ''
        })
        box.style.backgroundColor = 'red';

    })
})

БЛОГ НА HUSL

Вывести фигуры и по клику менять цвета

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