Add replace the class of a div upon some conditions with Javascript

Question

I am trying to replace the class of a div with Javascript. I have looked at some posts but it did not seem to help (e.g. Change an element's class with JavaScript). I have a straightforward innerHTML

document.getElementById("colored-title").innerHTML = "Add comments";

HTML is straightforward as well and it works when there is no condition on the class

<div id="colored-title"></div>

I tried many options (I listed them all below) but none of them seems to work.

if (array[current][5] == 4) { 
    document.getElementById("colored-title").addClass("green-text");
    document.getElementById("colored-title").className= "green-text";
    document.getElementById("colored-title").className+= "green-text";
    document.getElementById("colored-title").setAttribute=("class","green-text");
} else {
    // other format
}
document.getElementById("colored-title").innerHTML = "Add comments";

Some of those should work, some won't, for instance `addClass` is a jQuery method, `setAttribute` is a function — adeneo, Nov 17 '16 at 15:09
Possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — Nikhil Girraj, Nov 17 '16 at 16:03
You should try using [this](https://developer.mozilla.org/en/docs/Web/API/Element/classList) syntax. I believe this is the most straightforward syntax in pure javascript. — Nikhil Girraj, Nov 17 '16 at 16:15
Thanks for the answers and the reference. I might be wrong but they do not address the .innerHTML part of the question. I do not want solely to change the class I want to change the class and then be able to emit HTML text through Javascript innerHTML method with the updated class (unless there is another way to do it). — Bastien, Nov 17 '16 at 16:48

EvSunWoodard · Answer 1 · 2016-11-17T15:15:17.630

0

If you have jQuery in your project, then setAttribute should look like this:

$("#colored-title").attr("class", "green-text");

You have to use the jQuery selector, not document.getElementById.

Edit: Worth noting, the .attr method can also set multiple things at once:

$("#thing").attr({class:"green-text", title:"green-Object", id:"green-Id"});

edited Nov 17 '16 at 15:15

answered Nov 17 '16 at 15:11

EvSunWoodard

1,270
1
10
28

score 0 · Answer 2 · answered Nov 17 '16 at 15:13

You can add classname throught javascript by .classname='classname' This should work.check your if condition to see why it is not working

window.onload = function() {
  document.getElementById("colored-title").className= "green-text";
  
}

.green-text {
  color: green;
}

<div id="colored-title">
  hello
</div>

Hope it helps

score 0 · Answer 3 · answered Nov 17 '16 at 15:16

This statement will add the correct class to your div:

document.getElementById("colored-title").className= "green-text";

But with the following statement you are changing the class from "green-text" to "green-textgreen-text":

document.getElementById("colored-title").className+= "green-text";

score 0 · Answer 4 · answered Nov 17 '16 at 15:23

0

If you have jQuery in your project, then

$("#elem").addClass("myClass");

.myClass {
  color: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="elem">
 Text
</div>

answered Nov 17 '16 at 15:23

N.Venkatesh Naik

124
1
1
10

Add replace the class of a div upon some conditions with Javascript

4 Answers4