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
– Andrew Li, Commented Sep 2, 2016 at 19:44
@AndrewL. Yes I do know that. Kindly explain how is that relevant here ? — Etherealm
– Etherealm, Commented Sep 2, 2016 at 19:47
You did foo.style.display == 'none';. You attempted to assign, but compared :) — Andrew Li
– Andrew Li, Commented Sep 2, 2016 at 19:49

Andrew Li · Accepted Answer · 2016-09-02 20:09:39Z

10

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 2, 2016 at 20:09

answered Sep 2, 2016 at 19:47

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

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

7 Comments

user5066707 Over a year ago

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.

Andrew Li Over a year ago

Of course, but for demonstration purposes, element.style.<style> will be fine @nicematt

Etherealm Over a year ago

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 ?

user5066707 Over a year ago

@Etherealm It's not a tag, but a property. You were comparing the value of HTMLElement().style.display

j08691 Over a year ago

The OP set the style via a style block and shouldn't need to inline the CSS.

|

j08691 · Accepted Answer · 2016-09-02 19:58:36Z

1

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>

answered Sep 2, 2016 at 19:58

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

j08691 Over a year ago

@nicematt Aside from the incorrect == actually it is.

Collectives™ on Stack Overflow

Change display style property of a div using Javascript

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related