How to show/hide a div in javascript?

Question

When i click the button i want the div to show, and when i click the button again i want it to disappear. What am i doing wrong?

 <button type="button" onclick="myFunction()">Click Me!</button> <div id="Dglow" class="Dglow"> Glow </div> <script> function myFunction() { var e = document.getElementById("Dglow").style.display; if (e == "none") e = "block"; else { e = "none"; } } 

Answer 1

You should compare and change element's display property:

 function myFunction() { var e = document.getElementById("Dglow").style; if (e.display == "none") { e.display = "block"; } else { e.display = "none"; } } 

 <button type="button" onclick="myFunction()">Click Me!</button> <div id="Dglow" class="Dglow">Glow</div> 

Answer 2

Actually document.getElementById("Dglow").style.display returns a string and according to Left hand assignment rule you cannot store anything to that string, since that string is not a variable/object now ie not a reference to DOM anymore

You can do is

var e = document.getElementById("Dglow").style;
if(e.display == "none")
   e.display = "block";
else{
   e.display = "none";
}

Answer 3

Have you considered using Jquery? If so heres what you need.

$(document).ready(function(){
    $("#button").click(function(){
        $("#Dglow").toggle();
    });
});

You would need to give your button an id for this though.