javascript - Cannot Read Property Style Of 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.

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.

Share Improve this question asked Feb 9, 2015 at 1:03 123 8,95115 gold badges65 silver badges104 bronze badges

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

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot Read Property Style Of Null - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)