Reputation: 2484
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
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
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