我正在为客户构建一个网站,我正在使用预构建主题作为起点。它带有一个js文件,它有一个用于移动导航的点击功能,一切正常,但是当我为jQuery添加了一个脚本标签时,移动导航器坏了,控制台发出了这个错误:
Uncaught TypeError: Cannot set property 'onclick' of null
我该如何解决这个问题?导致错误的js行是document.getElementById('mobile-navigation').onclick = function(){
我尝试更改那一行以使用jQuery来选择元素,但这只会导致js文件中的另一个错误。我该如何解决这个问题?
在html中:
<div id="navigation">
<span id="mobile-navigation"> </span>
<h1 class="nav-h1"><a href="index.html" class="logo"><!-- <img src="images/logo.png" alt=""> -->Header</a></h1>
<ul id="menu">
<li class="selected navList">
<a ui-sref="home">Home</a>
</li>
<li class="navList">
<a href="about.html">About</a>
</li>
<li class="navList">
<a ui-sref="find">Find a Vendor</a>
<!-- <ul>
<li>
<a href="runningsinglepost.html">Running single post</a>
</li>
</ul> -->
</li>
<!-- <li>
<a href="blog.html">Blog</a>
<ul>
<li>
<a href="blogsinglepost.html">blog single post</a>
</li>
</ul>
</li> -->
<li class="navList">
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
js:
window.onload = function(){
var getNavi = document.getElementById('menu');
document.getElementById('mobile-navigation').onclick = function(){
var a = getNavi.getAttribute('style');
if(a){
getNavi.removeAttribute('style');
document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
} else {
getNavi.style.display='block';
document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
}
};
var getElm = getNavi.getElementsByTagName("LI");
for(var i=0;i<getElm.length;i++){
if(getElm[i].children.length>1){
var smenu = document.createElement("span");
smenu.setAttribute("class","mobile-submenu");
smenu.setAttribute("OnClick","submenu("+i+")");
getElm[i].appendChild(smenu);
};
};
submenu = function (i){
var sub = getElm[i].children[1];
var b = sub.getAttribute('style');
if(b){
sub.removeAttribute('style');
getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.png)';
getElm[i].lastChild.style.backgroundColor='rgba(255, 255, 255, 0.8)';
} else {
sub.style.display='block';
getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.png)';
getElm[i].lastChild.style.backgroundColor='rgba(248, 98, 130, 0.8)';
}
};
};
jQuery脚本标记:
<script type="text/javascript" src="/libs/bower_components/jquery/dist/jquery.min.js"></script>
mobile.js脚本标记:
<script src="./js/mobile.js" type="text/javascript"></script>
注意我在角度中执行此操作并且导航栏包含在索引中可能会有所帮助。
答案 0 :(得分:2)
我怀疑你的javascript在文档加载之前正在运行。这意味着javascript无法找到对象,因为它还没有存在。尝试使用document.onload
代替window.onload
。