How to change div display using javascript

Question

I have a div as follows:

<div id="div1" style="display:none"> 

To make it visible again, I tried unsuccessfully:

 document.getElementById('div1').style.display = '' 

How to change the display style of a div so that it displays again?

EDIT: obviously something else is wrong. this is what i'm actually doing:

 <script type="text/javascript"> flagprofile = <?php print 1 ?>; if(flagprofile == 1){ document.getElementById('theid').style.display = 'block'; } else { document.getElementById('theid2').style.display = 'block'; } </script> <div id="theid" style="display:none">This is div 1</div> <div id="theid2" style="display:none">This is div 2</div> 

I expect the first to appear, but it is not. What's wrong?

Answer 1

Change the display style to block instead of '' :

 document.getElementById('div1').style.display = 'block'; 

Note that you need to be careful to restore the original display value. If you set the a element to display: block , it will be very different than expected. You will need to set it to display: inline instead, making the obvious change to the above code.

---

Edit , with your editing, the problem becomes clear: the elements do not exist when you run your Javascript. Wait until everything loads before searching for items:

 <script type="text/javascript"> window.onload = function() { var flagprofile = <?php print 1 ?>; if(flagprofile == 1){ document.getElementById('theid').style.display = 'block'; } else { document.getElementById('theid2').style.display = 'block'; } }; </script> 

Answer 2

You set display to an empty string, which is invalid css, try among others , instead:

 document.getElementById('div1').style.display = 'block'; 

or

 document.getElementById('div1').style.display = 'inline-block'; 

Answer 3

This is a working example: Hope it helps! Michael, South Africa

  function CountryChange() { if (document.getElementById("statebox").style.display == "block") { document.getElementById('statebox').style.display = 'none'; document.getElementById('statebox').style.visibility = 'none'; } else { document.getElementById('statebox').style.display = 'block'; document.getElementById('statebox').style.visibility = 'visible'; } } 

  <!-- BOX to switch on/off --> <div class="control-group" id="statebox" name="statebox" style="display: none"> <label class="control-label">Bla Bla Bla...</label> </div> <!-- Pic to click --> <img onclick="javascript:CountryChange()" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" name="picpincountry"/> 

Answer 4

You can do:

 document.getElementById('div1').style.display = 'block' 

Answer 5

Works for me ... are you sure there is nothing in your stylesheet?

http://jsfiddle.net/minitech/YL8tq/

(Comment on JavaScript for testing without)

Answer 6

Can you verify that flagprofile is set to 1? Try making alert(flagprofile); and see if it is really installed. If not, you can try var flagprofile = 1; .

Answer 7

 var uname=document.getElementById("urname").value; var passwrd=document.getElementById("passwd").value; if(uname=="john" && passwrd=="123"){ document.getElementById("form2").style.display='none'; document.getElementById("form1").style.display='block'; } else{ alert("Wrong username and pass"); } } 

Answer 8

For some reason, I had to do the following: to get this job.

 document.getElementById('theid').style.display = 'block'; document.getElementById('theid').style.visibility = 'visible'; 

After I installed the first one, it was still hidden to me. As soon as I inspected the DOM in F12, I noticed that despite display: block , visibility is still set to hidden .

I should also note that I'm using jQuery / jQueryUI for the same elements.

Hope this helps someone.