How do I add a class when clicking on pure JS?

Question

How do I add a class when clicking on pure JS?

How do I add, for example, to an element with the "main" class the "main--main-bg" class when clicking on an element with the "intro__btn" class? And so that when you click on another element with the "intro__btn" class, the "main--main-bg" class is removed from the element with the "main" class and assigned to another specified class. I don't really search in JS myself, but I didn't find anything ready on the Internet on pure JS, and for the sake of this, I don't want to download the whole jQuery, because it's stupid.

3

html javascript css ecmascript

Author: SilencerWeb, 2017-05-13

Source

1 answers

score 6 · Accepted Answer

Like this

var btns = document.getElementsByClassName('intro__btn');
var par = document.getElementsByClassName('main');
btns[0].onclick = function() {
  par[0].classList.add("main--main-bg");
}
btns[1].onclick = function() {
  par[0].classList.remove("main--main-bg");
}

.main {
  color: red;
}

.main--main-bg {
  background-color: green;
}

<p class="main">TEXT</p>
<button class="intro__btn">Добавить класс</button>
<button class="intro__btn">Удалить класс</button>