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.

It appears you are missing an element with the id of 'mobile-navigation'. Stuff <div id='mobile-navigation'></div> in the HTML and I bet the error goes away. OR, you didn't close the script tag when you added jQuery. — Will
– Will, Commented Aug 5, 2016 at 0:24
I already have this in my html <span id="mobile-navigation"> </span>, like I said, the script was working until I added jQuery — jmona789
– jmona789, Commented Aug 5, 2016 at 0:25
can you add more details? how the script tag you've added looks like? how the html looks like > and the context where the js line above has been called — Mina Jacob
– Mina Jacob, Commented Aug 5, 2016 at 0:25
I added the html and the js, unfortunately it is not viewable, its only running locally on my machine — jmona789
– jmona789, Commented Aug 5, 2016 at 0:28

Corey Sery · Accepted Answer · 2016-08-05 00:48:58Z

2

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.

answered Aug 5, 2016 at 0:48

Corey Sery

1211 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jmona789 Over a year ago

Ok, that sort of helped, now the error is gone, but the mobile nav is still not working, no errors in the console

Corey Sery Over a year ago

Ah, I see. That was problem #1. Now I believe you are overwriting the original onclick function. You can either add to the original, or use jQuery for the function. $('#mobile-navigation').on('click', function () { /**/ }. jQuery won't overwrite the original handler.

jmona789 Over a year ago

Added that, the menu is still not opening when clicked.

jmona789 Over a year ago

I changed my mobile.js back to the original and moved the jquery to be at the end of my body tag and the menu started working but materilize js stopped working becasue it was loaded before jQuery, so i moved that down to below the jquery and the menu broke again, so the materilize js might be causing an issue too

Corey Sery Over a year ago

It sounds like your js files have conflicting handlers.

Collectives™ on Stack Overflow

jQuery is interfering with javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related