how to add remove class using pure javascript

Question

I tried with this code but it not working for me

const element = document.getElementsByClassName("dropdown")[0];
    if(total < 15){
      element.classList.add("otherclass");
    }else{
      element.classList.remove("otherclass");
    }

throwing error for me

<div ClassName="dropdown">
</div>

Answer 1

To refer to the class attribute of an element via JavaScript, you need to use the className property.

const element = document.getElementsByClassName("dropdown")[0];
if(total < 15){
  element.className+=" otherclass"; // Space before the string when there are other classes present.
}else{
  element.className.replace("otherclass", "");
}

You could break your className string down, delimited by spaces, in to an array and then have more control over your classes, of course you'd have to implode them back in to a string before implementing it.

Although jQuery (among other DOM Management libraries) already offers this.

EDIT

Please see this JSFiddle for a working example...

https://jsfiddle.net/fq8jwLyx/