CODEWITHSUNDEEP
javascript
Etherealm
Etherealm

Reputation: 2484

Change display style property of a div using Javascript

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>

Upvotes: 6

Views: 25287

Answers (2)

Andrew Li
Andrew Li

Reputation: 58002

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.

Upvotes: 9

j08691
j08691

Reputation: 208040

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>

Upvotes: 1

Related Questions