jQuery is interfering with javascript

Question

I'm building a site for a client and I'm using a pre-build theme as a starting place. It came with a js file that has an on click function for the mobile nav, everything was working fine, but when I added a script tag for jQuery the mobile nav broke and the console is giving this error: Uncaught TypeError: Cannot set property 'onclick' of null How can I fix this? The js line that causes the error is document.getElementById('mobile-navigation').onclick = function(){ I tries changing that one line to use jQuery to select the element but that just caused another error further down in the js file. How can I fix this?

in the 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>

The 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)';
                }
            };
        };

The 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>

It may be helpful to note I'm doing this in angular and the navbar is ng-included in the index.

Answer 1

I would suspect that your javascript is running before the document has loaded. This means that the javascript can't find the object, because it doesn't exist yet. Try using document.onload instead of window.onload.