Переключение между кнопками

Question

Есть 4 кнопки:

<button>Button-1</button>
<button>Button-2</button>
<button>Button-3</button>
<button>Button-4</button>

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

Answer 1

<script>

document.querySelector(".button-1").style.background = "red"; // устанавливаем цвет первой кнопки на красный
document.querySelector(".button-3").style.background = "green"; // устанавливаем цвет второй кнопки на зеленый

function clickBtn1() {
  document.querySelector(".button-1").style.background = "green";
  document.querySelector(".button-3").style.background = "red";
}

function clickBtn3() {
  document.querySelector(".button-1").style.background = "red";
  document.querySelector(".button-3").style.background = "green";
}

document.querySelector(".button-1").onclick = clickBtn1;
document.querySelector(".button-3").onclick = clickBtn3;

</script>

Answer 2

Не нужно вам для каждой кнопки назначать отдельную функцию. А если завтра кол-во кнопок изменится, например будет не 4, а 40? Для каждой кнопки отдельно будете функцию вешать? Да и не стоит менять CSS св-ва через JS без острой необходимости, для этого есть CSS и классы, которые мы можем легко переключать через JS. Вот один из правильных способов, как вам надо реализовать поставленную задачу:

const buttons = [...document.querySelectorAll('.btn')];

buttons.forEach(button => {
  button.addEventListener('click', () => {
    document.querySelector('.btn.active').classList.remove('active');
    button.classList.add('active');
  })
})

.btn.active {
  background-color: blue;
}

<button class='btn active'>Button 1</button>
<button class='btn'>Button 2</button>
<button class='btn'>Button 3</button>
<button class='btn'>Button 4</button>

БЛОГ НА HUSL

Переключение между кнопками

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