Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed. I have attached my code below for reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Why is that and can someone let me know where I am making mistake ?
Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed. I have attached my code below for reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Why is that and can someone let me know where I am making mistake ?
Share Improve this question edited Jan 3, 2022 at 8:57 Joshua 3,2063 gold badges26 silver badges41 bronze badges asked Jan 3, 2022 at 7:29 ParikshitRathodeParikshitRathode 614 bronze badges 1-
1
Why not just use
<details><summary>? That way you don't need any JS at all. – Dai Commented Jan 3, 2022 at 7:31
5 Answers
Reset to default 3As explained by this answer on SO, only the inline style, or the style applied to the element as an attribute to the element such as <div style="diplay:none;"></div> will show up when you access element.style. You need to access putedStyle to get the style applied on the element from anywhere in the document.
To get the putedStyle of an element, you can use:
window.getComputedStyle(element).display
So, your JS code is supposed to look like:
function myFunction() {
var x = document.getElementById("myDIV");
console.log(typeof x)
console.log(window.getComputedStyle(x).display)
if (window.getComputedStyle(x).display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Try it right here:
function myFunction() {
var x = document.getElementById("myDIV");
if (window.getComputedStyle(x).display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display:none;
}<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>The problem is that initially style.display is not set to anything (the inline style has not been set).
So instead of testing for 'none' test for NOT 'block'. That way the test will be achieved even on the first time through.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display != "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>At the first click, the div element is not found on the page as the CSS makes it display: none. So the first if block is not being carried out. It sets the element display as none at first click and on second click it changes the value to block.
So, we need to check if the display attribute value is none or "" at first click.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV
element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display
property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none" || x.style.display === "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>Pretty similar to @arsho's answer, you can define it's inline CSS as display:none first.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" style="display: none;">This is my DIV element.</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>An elegant approach would be to simply use the toggle function. You need only to add a hide class which you can toggling.
function myFunction() {
var x = document.getElementById("myDIV");
x.classList.toggle('hide');
} #myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
.hide {
display: none;
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" class="hide">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
</script>
</body>
</html>