Как определить, что при «onсlick» один из квадратов уже зеленый?

Question

[fanus]

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

<div class="wrapper__content">
       <div class="squares">1</div>
      <div class="squares">2</div>
      <div class="squares">3</div>
      <div class="squares">4</div>
</div>

let elem = document.querySelector('.wrapper__content');
elem.onclick = (e) => {
  if (!e.target.classList.contains('squares')) return;
  e.target.style.background = 'green';
};

Answer 1

[Rsa97]

Answer 2

[Сергей Соколов]

Как определить, что ... один из квадратов уже зеленый?

Выбрать все квадраты с зелёным цветом. Например, если бы зелень делалась не буквально через el.style.background, а добавлением класса .green, то достаточно было бы выбрать elem.querySelectorAll('.green');
Далее всем в этой коллекции убрать класс. После этого добавить класс green только кликнутому квадрату.

Класс объявить примерно так

.green {
  background-color: green !important;
}

Answer 3

[fanus]

Спасибо всем за помощь!!!

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