Issues adding and removing classes with javascript

Question

I'm trying to have javascript add or remove the hidden class from contact_form_top when the button contact_form_btn is pressed, but I have not been able to make it work.

function hide_unhide_btn() {
if (document.getElementId("contact_form_top").classList.contains("hidden");{
    document.getElementById("contact_form_top").classList.remove("hidden");
}
else {
     document.getElementById("contact_form_top").classList.add("hidden");
}}

Possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — James Thorpe, Jan 12 '16 at 16:43
by the way, these things are much simpler/better with jQuery — Oxi, Jan 12 '16 at 16:44
Also it's getElementsByClassName()... https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName — Anthony Rivas, Jan 12 '16 at 16:45
There are at least 4 separate issues with your attempt (not counting matters of coding style). Start by using your browser's Developer Tools' Console to see what errors you are getting. — Quentin, Jan 12 '16 at 16:45
`document.getElementclassName` is not a function should be `document.getElementsByClassName`. — Zakaria Acharki, Jan 12 '16 at 16:45
I've retracted my dupe-close vote. Whilst the question linked does cover adding/removing/all sorts of other class based things, the code here as mentioned by others contains other issues too that are just as important to fix as the class part. — James Thorpe, Jan 12 '16 at 16:47

score 2 · Answer 1 · edited May 23 '17 at 11:59

On a quick glance I see 5 problems in your code:

element.className is a String.

You can add a class to it with element.className += " hidden". Note the space before the "hidden" word.

Without the space you will get className = "contact_form_tophidden" (one word = one class) instead of "contact_form_top hidden" (two classes)

Also you can't subtract a string by using -=, subtraction is for numbers only.

Instead of manipulating the String className, I suggest you use classList which is an array-like list of classes that you can add and remove. If you want to be backward compatible with old browsers its best to use a framework such as jQuery or follow the className manipulation techniques described in https://stackoverflow.com/a/196038/519995

Also you need to use getElementsByClassName (uppercase C)
getElementsByClassName returns a collection of elements, you need to iterate them with a for loop and modify the class of each, one at a time. Again, if you'd use a framework such as jQuery this would be much easier.
Also the if statement you are using will always enter the first part and never the second part, since the content is always "closed" when the function runs.

score 0 · Answer 2 · answered Jan 12 '16 at 17:00

Instead of using .className i suggest to use classList to easily mantain the add/remove classes, e.g :

if(content == "closed"){
    document.getElementsByClassName("contact_form_top")[0].classList.remove("hidden");
    content = "open";
}else if(content == "open"){
    document.getElementsByClassName("contact_form_top")[0].classList.add("hidden");
    content = "closed";
}

Hope this helps.

score 0 · Answer 3 · answered Jan 12 '16 at 17:05

You can use the classList API for adding classes, which is very straightforward.

Here is an (unobtrusive) approach to adding and removing classes:

function hide_unhide_btn() {
this.parentNode.classList.toggle('hidden');
}

var contactFormButton = document.getElementsByClassName('contact_form_btn')[0];
contactFormButton.addEventListener('click',hide_unhide_btn,false);

.hidden {opacity: 0.1;}

<form class="contact_form_top">
<input type="button" value="Contact Me" class="contact_form_btn" />
</form>

Issues adding and removing classes with javascript

3 Answers3