最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot Read Property Style Of Null - Stack Overflow

programmeradmin2浏览0评论

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.

Share Improve this question asked Feb 9, 2015 at 1:03 123123 8,95115 gold badges65 silver badges104 bronze badges 1
  • 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

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>
发布评论

评论列表(0)

  1. 暂无评论