Toni Au Toni Au - 2 months ago 6
HTML Question

Why is style.display's value undefined?

What could be a reason for an element's

returning the value

In my Javascript, I have an if statement checking

if (document.getElementById("myModal").style.display != 'none'){
console.log("The pop up is visible.");
do something

In my CSS, I have
set to
display: none;

is a pop up form that is accessed through click.

I moved my
for the js file to the bottom of the HTML, doesn't this ensure that my DOM is fully loaded before the javascript is run? However, the
displays as soon as the page is loaded even though the conditional is not met (i.e. the pop up is currently not visible).

Not sure if the Leaflet API has anything to do with this?


What you have in your CSS stylesheets has little to do with the style property of your element. The style property only includes inline styles. Notice how in this code the first div has an empty style.display, even though it is display: none because of the stylesheet; only the second and third div have style.display properties set to anything:

const divs = document.querySelectorAll( 'div' );
[] divs, div => document.body.innerHTML += + '<br>' );
div {
    display: none;

<div style="display:none;">Two</div>
<div style="display:block;">Three</div>


If you want to get the computed style of an element, considering all stylesheets and inline styles, you can use getComputedStyle. Or you can just use jQuery:

if ( $('#myModal').is(':visible') ) {
    console.log("The pop up is visible.");