Show div onclick not working (Javascript)
Question
Javascript newbie here. Anyone could let me know what is wrong with my code? The div-to-show does not show after click and I can't figure out why...
let div = document.getElementById('div-to-show'); function openDiv() { if (div.style.display === 'none') { div.style.display = 'block'; } }
#div-to-show { display: none; }
<p onclick="openDiv">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
5 answers
solution1
1 2020-10-05 13:51:20
There are 2 problems here.
First, you aren't invoking the function with onclick="openDiv" - you have to put () after a function name to invoke it, eg onclick="openDiv()" .
Secondly, although you have a CSS rule of display: none , that doesn't result in the CSS property on the element itself changing; it remains the empty string:
let div = document.getElementById('div-to-show'); function openDiv() { console.log(div.style.display); }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
Instead, to check whether the element is being displayed, you can check whether its offsetParent is null:
let div = document.getElementById('div-to-show'); function openDiv() { div.style.display = div.offsetParent === null ? 'block' : 'none'; }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
For the general case of checking what CSS rules are being applied to a particular element, you can use getComputedStyle :
let div = document.getElementById('div-to-show'); const styleProp = div.style; const styleDec = window.getComputedStyle(div); function openDiv() { styleProp.display = styleDec.display === 'none' ? 'block' : 'none'; }
#div-to-show { display: none; }
<p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div>
solution2
0 2020-10-05 13:56:36
- You should mention function name correctly on
onclick.onclick=openDivshould be replaced toonclick=openDiv(). - You should define the
displaycss style directly on the tag to getdiv.style.displayon javascript.document.getElementById('...').stylewill only contain the style attributes which are defined on html tagstyleattribute only so to compare, it will be needed to setdisplayattribute on html file directly.
let div = document.getElementById('div-to-show'); function openDiv() { if (div.style.display === 'none') { div.style.display = 'block'; } }
<p onclick="openDiv()">Clique</p> <div id="div-to-show" style="display: none;"> <p>I am visible</p> </div>
solution3
0 2020-10-05 13:58:13
<!DOCTYPE html> <html> <head> <style> #div-to-show{ display: none; } </style> </head> <body> <p onclick="openDiv()">Clique</p> <div id="div-to-show"> <p>I am visible</p> </div> <script type="text/javascript"> let div = document.getElementById('div-to-show'); function openDiv(){ if(window.getComputedStyle(div).display === 'none'){ div.style.display = 'block'; } } </script> </body> </html>
solution4
0 2020-10-05 13:58:27
In your code is wrong the way you write onclick in this tag <p> , you need to write onclick in this way:
<p onclick="openDiv()">Clique</p>
and try again.
solution5
-1 2020-10-05 16:10:47
Hi as some other examples here explains, you should use the addEvenlListener. If you only what to show the div on the click event you do not need a if statement. You can add a class to the div that sets the display:none. Then in the code you only need to call the remove on the classList on the div. This will not throw an error or do anything if the class is not in the classList. So no need to implement any check logic.
Using the hidden class makes so you do not need to know what the display value was on the div element initially. Less to worry about.
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove
let div = document.getElementById('div-to-show') document.getElementById('p-button').addEventListener("click", openDiv); function openDiv() { div.classList.remove('hidden'); }
#div-to-show.hidden { display: none; }
<p id="p-button">Clique</p> <div id="div-to-show" class="hidden"> <p>I am visible</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.