Как сделать так, чтобы при нажатии на кнопку ей добавлялся класс c помощью js или Jquery?

Question

[NiAomineKe]

При нажатии на кнопку нужно добавить ей класс Active.
Буду очень благодарен.

<div class="budget-but1" id="btnbudmain">
<button class="btn-bud">Менее 250.000</button>
<button class="btn-bud2">Около 500.000</button>
<button class="btn-bud">Около 1 млн</button>
 <button class="btn-bud3">1-3 млн</button>
</div>

.btn-bud{
    width: 425px;
    height: 102px;
    border-radius: 40px;
    font-size: 42px;
    background-color: white;
}
.btn-bud2{
    width: 425px;
    height: 102px;
    border-radius: 40px;
    font-size: 42px;
    background-color: white;
    margin-left: 12px;
    margin-right: 70px;
}
.btn-bud3{
    width: 425px;
    height: 102px;
    border-radius: 40px;
    font-size: 42px;
    background-color: white;
    margin-left: 12px;
}
.active{
    background-color: #121212;
    color: white;
    transition-duration: 133ms;
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
    transition-delay: 0s;
    transition-property: background-color;
}

Comments

[Вадим]

А мы будем все Вам благодарны если Вы
1) Научитесь гуглить
2) Будете соблюдать правила сервиса.

[Вадим]

yaforyou.ru/?q=add%20class%20to%20element%20on%20c...

[Ankhena]

А я очень сильно сомневаюсь, что это вообще кнопки

[NiAomineKe]

Ankhena, Здравствуйте, это действительно кнопки.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.2.2, 3.4, 5.12 Регламента.

[NiAomineKe]

Вадим, Извините, что не ознакомился с правилами площадки и прекрасно понимаю, что не знание правил, не освобождает от ответственности. Но правда, до того как выложить этот вопрос, я около 30 минут искал на него ответ и все у мне либо не подходило, либо просто не работало.

[Вадим]

NiAomineKe, Идеальный вопрос в себе содержит помимо самого вопроса и обозначения темы и проблемы - демку на codepen где воспроизводится озвученная проблема, а так же содержит в себе ваши попытки решения проблемы, чтобы можно было оперативно помочь исправить ошибку и дать Вам ответ.

[Ankhena]

NiAomineKe,

Здравствуйте, это действительно кнопки.

Здравствуйте, это действительно не кнопки.
Это группа радио.
Соответственно, цвет у выбранного устанавливается элементарно.

input:checked {backgroud: yellow}

Answer 1

[Andrew E]

Почитайте про События «click» и addEventListener и event.target.

А еще про циклы типа forEach и то как найти элементы в DOM например querySelectorAll.

Алгоритм примерно такой:
Нужно найти все кнопки (см. querySelectorAll) циклом повесить обработчик событий на каждую кнопку (см. addEventListener) и при событии клика вешать нужный класс на нажатую (см. event.target)

А если хочеца готовое решение, на ютубе масса примеров и гайдов на эту тему. Тема довольно простая на самом деле. Удачи!