Как добавить класс при клике на элемент на чистом JS?

Question

[Максим]

Как добавить, допустим, элементу с классом "main" класс "main--main-bg" при клике на элемент с классом "intro__btn"? И чтобы при клике на другой элемент с классом "intro__btn" класс "main--main-bg" удалялся у элемента с классом "main" и присваивался другой, указанный класс. Сам в JS не очень шарю, а в интернете готового не нашел на чистом JS, а ради этого загружать целый jQuery не хочется, т.к. глупо.

Answer 1

[Иван Вишневский]

Современный способ по добавлению и удалению классов - classList API.

document.getElementById('intro_btn').onclick = function() {
  document.getElementById('main').classList.add('main--main-bg');
}

Соответственно, на чистом js каждой кнопке даёте id, и присваиваете нужный класс. Если нужно убрать, то classList.remove('название_класса'), если включить/выключить - то toggle()

Comments

[Максим]

эм...а по классам никак?

[Иван Вишневский]

Максим: document.querySelector('.intro_btn')

Answer 2

[Alexander Pushkarev]

Вот вам сайт - youmightnotneedjquery.com
Если хотите готовое решение - на фриланс

Answer 3

[fardo99]

document.getElementById('intro_btn').onclick = function() {
document.getElementById('main').classList.add('main--main-bg');
this..classList.remove('main--main-bg');
}

а как с помощью этого кода на ту же кнопку удалить класс ? мне получается открыть кнопку , а чтобы убрать класс не получается, вот так я пробовал до все этого

Comments

[YVNGER]

Вместо add используйте toggle

document.getElementById('intro_btn').onclick = function() {
  document.getElementById('main').classList.toggle('main--main-bg');
}

[Николай]

YVNGER, огромное спасибо