jQuery đang can thiệp vào javascript

Question

Tôi đang tạo trang web cho khách hàng và tôi đang sử dụng chủ đề dựng sẵn làm nơi bắt đầu. Nó đi kèm với tệp js có chức năng nhấp chuột cho điều hướng trên thiết bị di động, mọi thứ đều hoạt động tốt, nhưng khi tôi thêm thẻ tập lệnh cho jQuery nav di động bị hỏng và bảng điều khiển đưa ra lỗi này: Uncaught TypeError: Cannot set property 'onclick' of null Làm cách nào để khắc phục sự cố này ? Dòng js gây ra lỗi là document.getElementById('mobile-navigation').onclick = function(){ Tôi cố gắng thay đổi một dòng đó để sử dụng jQuery để chọn phần tử nhưng điều đó chỉ gây ra lỗi khác tiếp tục trong tệp js. Làm thế nào tôi có thể sửa lỗi này?

trong html:

<div id="navigation"> 
    <span id="mobile-navigation">&nbsp;</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> 

Các 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)'; 
       } 
      }; 
     }; 

Các jQuery script tag:

<script type="text/javascript" src="/libs/bower_components/jquery/dist/jquery.min.js"></script> 

mobile.js script tag:

<script src="./js/mobile.js" type="text/javascript"></script> 

Nó có thể hữu ích để lưu ý tôi đang làm điều này trong góc và navbar là ng-bao gồm trong chỉ mục.

Answer 1

Tôi nghi ngờ rằng javascript của bạn đang chạy trước khi tài liệu được tải. Điều này có nghĩa là javascript không thể tìm thấy đối tượng, vì nó chưa tồn tại. Hãy thử sử dụng document.onload thay vì window.onload.