Как вывести 4 красных квадрата, при клике на любой, он становиться зеленым, при этом если есть уже зеленый квадрат, то он становиться обратно красным?

Question

[boluchevskii]

Вывести 4 красных квадрата, при клике на любой, он становиться зеленым, при этом если есть уже зеленый квадрат, то он становиться обратно красным и так можно кликать на любой квадрат, он становиться зеленым, а старый зеленый квадрат обратно крассным и тд. (Сделать задачу так, чтобы можно было добавить ещё хоть 100 квадратов при этом скрипт не надо менять).

Код не работает. Помогите, пожалуйста, исправить.

<div id="js" class="box">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

.box {
	display: flex;
	flex-direction: row;
	gap: 10px;
  }
  .square {
	width: 70px;
	height: 70px;
	background-color: red;
	cursor: pointer;
  }

document.querySelector('#js').addEventListener(
    'click',
    (e) => {
    if (!e.target.classList.contains('square')) {
    return;
    }
    document.querySelector('div.green')?.classList.remove('green');
    e.target.classList.add('green');
  }
)

Answer 1

[Александр]

.green { background-color: green; }