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";
    }
}

dfsq · Accepted Answer · 2015-08-22 13:42:26Z

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>

answered Aug 22, 2015 at 13:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Over a year ago

Shorthand e.display = e.display == "block" ? "none" : "block";

Joy Biswas · Accepted Answer · 2015-08-22 13:43:35Z

1

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";
}

answered Aug 22, 2015 at 13:43

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Comments

user3835115 · Accepted Answer · 2015-08-22 13:48:27Z

1

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.

answered Aug 22, 2015 at 13:48

user3835115

Collectives™ on Stack Overflow

How to show/hide a div in javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related