1

как выделить только ту кнопку на которую кликнул. Она выделятся но если кликну на другую кнопку то та должна сбросить класс 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>

1 ответ 1

3

Самое простое решение - при клике сперва убираем класс у всех 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>

3
  • В современных браузерах в NodeList и так есть встроенный forEach, кстати → caniuse.com/?search=NodeList%20forEach. 25 мар 2021 в 2:27
  • А зачем перебирать все элементы? Не проще сразу взять тот, который active?
    – De.Minov
    25 мар 2021 в 6:50
  • 1
    @De.Minov ещё проще сразу создать input:radio и заканчивать. Ведь это точь-в-точь тот функционал, который имеет встроенный radio элемент.
    – eccs0103
    3 янв в 13:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.