Изменения цвета кнопок при нажатии, с заменой старых на исходное

Question

хочу сделать выбор размера для вещи на сайте. Есть 5 кнопок. Уже сделал, чтобы при нажатии на нее менялся цвет, но мне нужно, чтобы при нажатии на любую другую из них, новая меняла цвет, а старая возвращала свой обычный цвет.

var size_btn = document.getElementById("sizebtn1");
size_btn.addEventListener("click", function() {
  this.classList.add("active_size_btn");
});

var size_btn = document.getElementById("sizebtn2");
size_btn.addEventListener("click", function() {
  this.classList.add("active_size_btn");
});

var size_btn = document.getElementById("sizebtn3");
size_btn.addEventListener("click", function() {
  this.classList.add("active_size_btn");
});

var size_btn = document.getElementById("sizebtn4");
size_btn.addEventListener("click", function() {
  this.classList.add("active_size_btn");
});

var size_btn = document.getElementById("sizebtn5");
size_btn.addEventListener("click", function() {
  this.classList.add("active_size_btn");
});

.choose_size {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.cs_card {
    border: black 1px solid;
    border-radius: 0px;
    margin: 0px 10px;
    height: 35px;
    width: 35px;
}

.cs_card:hover {
    background-color: rgb(200, 200, 200);
}

.active_size_btn {
    background-color: rgb(165, 165, 165);
    
}

.active_size_btn:hover {
        background-color: rgb(165, 165, 165);
    }

<div class="choose_size">
                <button class="cs_card" id="sizebtn1">XS</button>
                <button class="cs_card" id="sizebtn2">S</button>
                <button class="cs_card" id="sizebtn3">M</button>
                <button class="cs_card" id="sizebtn4">L</button>
                <button class="cs_card" id="sizebtn5">XL</button>
            </div>

Answer 1

мне нужно, чтобы при нажатии на любую другую из них, новая меняла цвет, а старая возвращала свой обычный цвет

Предложу вот такой вариант реализации...

document.querySelector(".choose_size").addEventListener("click", function(e) {
  const o = e.target.closest('.cs_card')
  if (!o) return
  this.querySelectorAll(".active_size_btn").forEach(o => o.classList.remove("active_size_btn"))
  o.classList.add("active_size_btn");
});

.choose_size {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.cs_card {
  border: black 1px solid;
  border-radius: 0px;
  margin: 0px 10px;
  height: 35px;
  width: 35px;
}

.cs_card:hover {
  background-color: rgb(200, 200, 200);
}

.active_size_btn {
  background-color: rgb(165, 165, 165);
}

.active_size_btn:hover {
  background-color: rgb(165, 165, 165);
}

<div class="choose_size">
  <button class="cs_card" id="sizebtn1">XS</button>
  <button class="cs_card" id="sizebtn2">S</button>
  <button class="cs_card" id="sizebtn3">M</button>
  <button class="cs_card" id="sizebtn4">L</button>
  <button class="cs_card" id="sizebtn5">XL</button>
</div>

Answer 2

но мне нужно, чтобы при нажатии на любую другую из них, новая меняла цвет, а старая возвращала свой обычный цвет

для таких целей гляньте в сторону <input type='radio'> вместо кнопок. а для текста есть <label>

input + label {
  background: lightgray;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
  grid-column: 2;
}

[name='size']:checked + label {
  background: skyblue;
  border: 1px solid blue;
}

#inputs:not(:checked), #inputs:not(:checked) ~ input{
  display: none;
}

form {
  display: inline-grid; grid-gap: 3px;
  grid-template-columns: auto 1fr;
}

<form>
  <input type='checkbox' id='inputs' checked>
  <label for='inputs'>спрятать инпуты</label>

  <input type='radio' name='size' value='S' id='SIZE1'>
  <label for='SIZE1'>S</label>

  <input type='radio' name='size' value='L' id='size2'>
  <label for='size2'>L</label>

  <input type='radio' name='size' value='XL' id='size3' checked>
  <label for='size3'>XL</label>

  <input type='radio' name='size' value='XXL' id='size4'>
  <label for='size4'>XXL</label>

  <input type='radio' name='size' value='XXXL' id='size5'>
  <label for='size5'>Xватит Xавать Xаря Lопнет</label>
</form>

вёрстку это конечно слегка раздует, зато JS не требуется вообще.

Answer 3

Не буду писать примеров кода. Твоя задумка понятна и легко реализуема. Тебе просто надо установить в активную кнопку активный класс, все кнопки загнать в массив при клике на кнопку запускать handler который удаляет со всех кнопок активный класс и устанавливает новый на новую кнопку. Это самый простой и быстрый способ. Либо хранить состояние включенной кнопки в переменной и переносить ее на новую кнопку удаляя состояние со старой.

Answer 4

Задайте всем кнопкам общий класс, например but

   //формируем список кнопок
buts = document.querySelectorAll('but') 
document.addEventListener('click', (event)=>{
   if(event.target.classList.contains('but')){
       buts.forEach(el => {
          //удаляем активные классы у всех кнопок
          el.classList.remove("active_size_btn") 
   });
   //добавляем активный класс к кнопке, на которую нажали
   event.target.classList.add("active_size_btn")

} })

БЛОГ НА HUSL

Изменения цвета кнопок при нажатии, с заменой старых на исходное

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