Кнопки не меняют цвет при использовании JSHTML

Question

Имеются две кнопки в HTML, хочу прописать функцию, которая заставит их менять цвет при нажатии:

HTML

<div class="buy_rent_buttons">
      <button
        style="border-radius: 3%; height: 3rem; width: 10rem"
        type="button"
        class="buy_rent btn btn-danger"
        id="buy_rent"
      >
        Buy
      </button>
      <button
        style="border-radius: 3%; height: 3rem; width: 10rem"
        type="button"
        class="buy_rent btn btn-danger"
        id="buy_rent"
      >
        Rent
      </button>
    </div>

Кнопки выбираю через JS и прописываю функцию, через которую назначаю им новый класс после клик-ивента:

JS

let buyRent = document.querySelector("#buy_rent");

buyRent.addEventListener('click', function(e) {
  e.preventDefault();
  buyRent.classList.add("colored_btn");
})

CSS

   .colored_btn {
      background-color: green;
    }

Меняет цвет после клика только первая кнопка. QuerySelectorAll не работает вообще. Подскажите, как правильно сделать это?

Answer 1

inline-стили - зло. Переносим в CSS и назначаем через класс.
ID должен быть уникальным на странице, поэтому добавляем, например, порядковый номер.
Тегу <button> не нужен атрибут type="button". Масло масляное. Убираем.
Если действия одинаковые, то лучше использовать делегирование, вместо назначения обработчика каждой кнопке.

// Получаем контейнер с кнопками
let buyRentButtons = document.querySelector('.buy_rent_buttons');
/* Добавляем контейнеру обработчик */
buyRentButtons.addEventListener('click', function(ev) {
  // Если кликнули не по кнопке, тогда выходим из функции
  if (ev.target.tagName != 'BUTTON') return false;
  // Добавляем нужный класс
  ev.target.classList.add('colored_btn');
});

.btn { height: 3rem; width: 10rem; border-radius: 3%; }
.colored_btn { background-color: green; }

<div class="buy_rent_buttons">
  <button class="buy_rent btn btn-danger" id="buy_rent-1">Buy</button>
  <button class="buy_rent btn btn-danger" id="buy_rent-2">Rent</button>
</div>

БЛОГ НА HUSL

Кнопки не меняют цвет при использовании JSHTML

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