document.getElementById(“test”).style.display=“hidden” not working

Question

I want to hide my form when I click on the submit button. My code is as follows:

Answer 1

Using jQuery:

   $('#test').hide();

Using Javascript:

document.getElementById("test").style.display="none";

Threw an error "Cannot set property 'display' of undefined"

So, fix for this would be:

document.getElementById("test").style="display:none";

where your html code will look like this:

<div style="display:inline-block" id="test"></div>

Answer 2

this should be it try it.

document.getElementById("test").style.display="none"; 

Answer 3

There are two ways of doing this.

Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.

If you want to use "hidden" the syntax should be as follows.

object.style.visibility="hidden"

The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.

Check this illustration

Answer 4

Maybe you can add a class like 'hide'.

Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.

document.getElementById("test").classList.add("anotherclass");

Answer 5

Through JavaScript

document.getElementById("test").style.display="none";

Through Jquery

$('#test').hide();