Change display style property of a div using Javascript

Question

I'm trying to display a div onclick of a btn by changing the style property of the div. But I can't read the display property of that div. I read somewhere that the code doesn't work because the script tries to get the value before the div has loaded so the script should be triggered after window.onload. How do I make the script work after window has loaded but only when the button has been clicked ?

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
#hidden-div{
display: none;
}
</style>
<script type="text/javascript">
function showMe() {
   var foo = document.getElementById('hidden-div');
   alert(foo.style.display); //this gives a blank alert

   if(foo.style.display == ''){
    foo.style.display = 'block';
   }
   else {
    foo.style.display == 'none';
   } 
}
</script>
</head>
<body>
  <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br>

  <div id="hidden-div">

  <input type="checkbox" id="check-1"> Check 1</input>
  <br>
  <input type="checkbox" id="check-2"> Check 2</input>
  <br>
  <input type="checkbox" id="check-3"> Check 3</input>

  </div>
</body>
</html>

You do understand that `==` is for comparison and `=` is for assignment — Andrew Li, Sep 02 '16 at 19:44
@AndrewL. Yes I do know that. Kindly explain how is that relevant here ? — Etherealm, Sep 02 '16 at 19:47
You did `foo.style.display == 'none';`. You attempted to assign, but compared :) — Andrew Li, Sep 02 '16 at 19:49
Possible duplicate of [How to get an HTML element's style values in javascript?](http://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript) — Heretic Monkey, Sep 02 '16 at 20:45

Andrew Li · Accepted Answer · 2016-09-02T20:09:39.417

7

Something to note: == is for comparison, = is for assignment. Also, there are no closing input tags. Here's the finished snippet:

function showMe() {
   var foo = document.getElementById('hidden-div');

   if(foo.style.display == '' || foo.style.display == 'none'){
        foo.style.display = 'block';
   }
   else {
        foo.style.display = 'none';
   }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br>

  <div id="hidden-div" style="display:none;">

  <input type="checkbox" id="check-1"> Check 1
  <br>
  <input type="checkbox" id="check-2"> Check 2
  <br>
  <input type="checkbox" id="check-3"> Check 3

  </div>
</body>
</html>

I also changed some logic. If the display is none, and the button is clicked, toggle the visibility. If display is not none, then make it none.

The thing is element.style.<style> is only accessible if the style is set inline.

edited Sep 02 '16 at 20:09

answered Sep 02 '16 at 19:47

Andrew Li

55,805
14
125
143

You could note that it'd also be better to get the element styles by using `getComputedStyle`, which returns the active styles in a `CSSStyleDeclaration` object. – Sep 02 '16 at 19:48
1

Of course, but for demonstration purposes, `element.style. – Andrew Li Sep 02 '16 at 19:49
Thanks. Your code works. But if you notice I have set display = 'none' in the style tag. Can you please tell me why doesn't the script read from the internal style tag ? – Etherealm Sep 02 '16 at 19:55
1

@Etherealm It's not a tag, but a property. You were comparing the value of `HTMLElement().style.display` – Sep 02 '16 at 19:57
The OP set the style via a style block and shouldn't need to inline the CSS. – j08691 Sep 02 '16 at 19:57
@j08691 Just noticed that :) – Andrew Li Sep 02 '16 at 19:58
@Etherealm The style attribute is only accessible if the styling is inline. You must set it inline or use `getComputedStyle` – Andrew Li Sep 02 '16 at 20:10

score 1 · Answer 2 · answered Sep 02 '16 at 19:58

foo.style.display only works for styling that has been set inline, not for stylehseets or blocks. For that you would use getComputedStyle:

function showMe() {
  var elem = document.getElementById("hidden-div");
  var foo = window.getComputedStyle(elem, null);
  if (foo.getPropertyValue("display") == 'none') {
    elem.style.display = 'block';
  } else {
    elem.style.display = 'none';
  }
}

#hidden-div {
  display: none;
}

<input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes
<br>
<div id="hidden-div">
  <input type="checkbox" id="check-1"> Check 1
  <br>
  <input type="checkbox" id="check-2"> Check 2
  <br>
  <input type="checkbox" id="check-3"> Check 3
</div>

@nicematt Aside from the incorrect `==` actually it is. – j08691 Sep 02 '16 at 20:02 — j08691, Sep 02 '16 at 20:02

Change display style property of a div using Javascript

2 Answers2