как выделить только ту кнопку на которую кликнул

Question

как выделить только ту кнопку на которую кликнул. Она выделятся но если кликну на другую кнопку то та должна сбросить класс active. То есть только одна кнопка должна иметь класс active

const buttons = document.querySelectorAll('button')
    
for(let i = 0; i < buttons.length; i++){
  buttons[i].onclick = function(){
    this.classList.add('active')
  }
}

button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: green;
}
.active{
  background: red;
}

<main>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</main>

Answer 1

Самое простое решение - при клике сперва убираем класс у всех button, а потом добавляем его нужной

const buttons = document.querySelectorAll('button')
    
for(let i = 0; i < buttons.length; i++){
  buttons[i].onclick = function(){
    [...buttons].forEach((el) => el.classList.remove('active')); //убираем класс
    this.classList.add('active')
  }
}

button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: green;
}
.active{
  background: red;
}

<main>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</main>

БЛОГ НА HUSL

как выделить только ту кнопку на которую кликнул

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