Change color in a number of different divs that all share the same class

Question

I have a site with a lot of different div. The thing they have in common is all share (besides their unique classes) a shared class. Lets just call it .changeClass.

What I am looking for is code with a button (or radio buttons) and by clicking the button, the background instance of all these divs will get the same one (which the .changeClass has). So the .changeClass will just be active when the button is toggled/clicked.

I am looking for a way to do this with pure javascript and no Jquery.

Sorry for being a noob :-)

Answer 1

In the solution below, clicking the <button> element will add/remove the class style .changeClass to all elements that have the class style .apply applied.

let button = document.getElementById('change');
let containers = document.getElementsByClassName('apply');

function changeButtonText() {
  if(button.innerHTML === "Add")
    button.innerHTML = "Remove";
  else
    button.innerHTML = "Add";
}

button.addEventListener('click', function() {
  for(let index = 0 ; index < containers.length ; ++index)
      containers[index].classList.toggle('changeClass');
  changeButtonText();
});

div {
  margin-top: 25px;
}
.apply {
  border: 3px solid black;
}
.changeClass {
  background-color: black;
  color: white;
  border: 3px solid red;
  margin-top: 25px;
}

<button id="change">Add</button>

<div class="apply">1</div>
<div class="apply">2</div>
<div class="apply">3</div>
<div class="apply">4</div>
<div class="apply">5</div>

Answer 2

First lets get all divs that are on the DOM

const divs = document.getElementsByTagName("div");

You will have array of all the divs that are on the DOM. Then add your class to all of it. In order to do that, lets loop it.

divs.forEach(div => div.className += div.className + " changeClass");

Answer 3

Could this be what you are looking for? In html:

<button onclick="changeColor('blue');">blue</button>

In JS

function changeColor(newColor) {
    var elem = document.getElementsByClassName("changeClass");
    elem.style.color = newColor;
}

The HTML color can be any color you would like it to be, just change they name from blue to any color or input a hex code.

Answer 4

We have multiple divs with the same class value We have given a function to the button that we want the event to happen when it is clicked, using the onclick method. Now when we click the button, the function called myFunction will run.

HTML:

<div class="changeClass">Im Example Div</div>
<div class="changeClass">Me Too</div>
<button type="submit" onclick="myFunction()">Click To Change Div BgColors ! 
</button>

We must define myFunction as Javascript and change the background color.

We have defined a function called myFunction.

With the getElementsByClassName selector in our function, we got all the data with the class value changeClass in object format.

To add a background (or any css property) to all of these objects; We put the object in a for loop and now we split our elements. We can now define a background color for our elements with the style.backgroundColor parameter.

JavaScript:

function myFunction(){
    var divs = document.getElementsByClassName('changeClass');

    for(var i=0; i< divs.length; i++){
        divs[i].style.backgroundColor = 'red';
    }
}

For more detailed information, you can refer to the resources: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 5

Don't be sorry for being new at something and wanting to learn more!

So what you are saying is that the divs you want to change all have a common class of "changeClass". If this is the case then you want a function is passed an argument value of the color you want to be changed. Since all of your divs are static and you probably don't plan on changing, declare a variable outside of this function that has the following code

const divs = document.getElementsByClassName("changeClass")

Then, inside of the function, loop through all of the divs collected inside the variable "divs", or whatever you want to call it. Since "getElementsByClassName" returns a collection, it does not have the built in "foreach" and "map" methods. So you have to use a for loop preferably the following.

const divs = document.getElementsByClassName("changeClass");
function changeColor(color) {
   for (let element of divs) {
      element.style.backgroundColor = color;
   }
}

I may have interpreted this wrong but I hope it helps

Answer 6

You may find using a CSS variable helpful.

For example:

function bg(color) {
  document.body.style.setProperty('--bg', color);
}

body {
  --bg: cyan;
}

.container {
  display: flex;
  gap: 1vw;
}

.container div {
  width: 100px;
  height: 100px;
  background-color: black;
}

.container div.changeClass {
  background-color: var(--bg);
}

<body>

  <button onclick="bg( 'red');">Red</button>
  <button onclick="bg( 'green');">Green</button>
  <button onclick="bg( 'blue');">Blue</button>
  <button onclick="bg( 'black');">Black</button>
  <div class="container">
    <div class="changeClass"></div>
    <div class="changeClass"></div>
    <div class="changeClass"></div>
    <div></div>
    <div class="changeClass"></div>
  </div>
</body>

Then when one of the radio buttons is clicked it sets the variable --bg.

Here's a simple snippet:

Answer 7

First of all - thank you for all your replies. And yes I should have included code. I tried so many things that i just gave up at som point - got confused what was right code and what was just rubbish. So I appreciate so much that you all took time to answer me. This was my first post so now I know for the future. The answers I got all was possible ways to solve my problem - so thank you all. I will do better next time. You are awesome...

BTW - All solutions seems to work - but can only checkmark one of them as you know.

Answer 8

You can add or remove a class to change the colours of different div:

document.queryselector('.className').classList.add('classNamethatyouwanttoadd');

document.queryselector('.className').classList.remove('classNamethatyouwanttoadd');