Replacing multiple classes in multiple HTML DOM elements with JavaScript?

Question

So I have a few elements:
HTML:

<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>

As you can see, these buttons have the class btn-post and when someone clicks a button and activates an event.

I want to replace all the btn-post classes with btn btn-success (btn and btn-success)
Any helpful advice?

Loop through elements selected with `querySelectorAll`. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll — evolutionxbox, Jan 15 '21 at 11:52

score 2 · Accepted Answer · answered Jan 15 '21 at 11:54

Try something like this

const btns = document.querySelectorAll(".btn-post")

btns.forEach(btn => {
  btn.onclick = () => btns.forEach(_btn => _btn.className = "btn btn-success")
})

.btn-post {
  background-color: black;
  color: white;
}

.btn-success {
  background-color: green;
}

<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>

Saurabh Vishwakarma · Answer 2 · 2021-01-15T11:57:26.190

0

You can use javascript to do so.

var elems = document.getElementsByClassName("btn-post");

for(var i = 0; i < elems.length; i++) {
    elems[i].className = "btn btn-success";
}

edited Jan 15 '21 at 11:57

answered Jan 15 '21 at 11:52

Saurabh Vishwakarma

51
6

1

This won't work. See [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – charlietfl Jan 15 '21 at 11:54

score 0 · Answer 3 · answered Jan 15 '21 at 11:57

You can get all the elements with class bln-post, and create an array from it. You can then edit the class names using classList API.

const elems = document.getElementsByClassName('btn-post')

Array.from(elems).forEach(el => {
  el.classList.remove('btn-post');
  el.classList.add('btn');
  el.classList.add('btn-success');
})

.btn-success {
  color: green
}

<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>
<button class="btn-post">Post</button>

Replacing multiple classes in multiple HTML DOM elements with JavaScript?

3 Answers3