I've been getting this error when trying to hide my mobile nav when a link is clicked. It seems like a pretty simple issue, and I've looked through some similar questions but I can't seem to figure it out.

My HTML

<div id=mobilenav class=mobilenav onclick="HideNav();">
    <nav id=nav>
    </nav>
</div>

mobilenav is hidden on default, and when the screen shrinks I show it.

The CSS

.mobilenav {
    display:none
}

@media screen and (max-width: 900px) {
    .mobilenav {
        display: block;   
    }
}

When a link in mobilenav is clicked I run this JavaScript function:

function HideNav () {

    var nav = document.getElementById(nav);

    nav.style.display='none';
}

But the console is giving me the "Cannot read property style of null" error. I'm not sure how nav is null.

I've been getting this error when trying to hide my mobile nav when a link is clicked. It seems like a pretty simple issue, and I've looked through some similar questions but I can't seem to figure it out.

My HTML

<div id=mobilenav class=mobilenav onclick="HideNav();">
    <nav id=nav>
    </nav>
</div>

mobilenav is hidden on default, and when the screen shrinks I show it.

The CSS

.mobilenav {
    display:none
}

@media screen and (max-width: 900px) {
    .mobilenav {
        display: block;   
    }
}

When a link in mobilenav is clicked I run this JavaScript function:

function HideNav () {

    var nav = document.getElementById(nav);

    nav.style.display='none';
}

But the console is giving me the "Cannot read property style of null" error. I'm not sure how nav is null.

• javascript
• html
• css
• mobile
• nav

• Although I'm now just realizing that won't work anyways, because the chid elements are going to be hidden anyways... – 123 Commented Feb 9, 2015 at 1:05

2 Answers 2

Your code should be

var nav = document.getElementById("nav");

You have to pass a string to the routine. Your code would not have resulted in an error because the variable was declared in your function, but it would have had no value.

Yup the Pointy answer is correct. It worked for me.

<div id="mobilenav" class="mobilenav" onclick="HideNav();">
 <nav id="nav"> 
   Iam inside the nav id.
 </nav>
   Iam outside the nav id.
</div>

<style type="text/css">
.mobilenav {
display:none; /* Hides the Content */
}

@media screen and (max-width: 900px) {
.mobilenav {
    display: block;   /* Displays the content */
  }
}
</style>
<script type="text/javascript">
   function HideNav () {
     var nav = document.getElementById("nav");
       nav.style.display='none';
    }
</script>