uncaught typeError: cannot read property 'querySelectorAll' of null

I am trying to use this menu for mobile on a site.

I have it working but one ie11 user is reporting an error and i am seeing the following error in console Uncaught TypeError: Cannot read property 'querySelectorAll' of nullmlPushMenu._init @ mlpushmenu.js:89mlPushMenu @ mlpushmenu.js:67(anonymous function) @ (index):1062

Here is a snippet of the js file in question

function mlPushMenu( el, trigger, options ) { this.el = el; this.trigger = trigger; this.options = extend( this.defaults, options ); // support 3d transforms this.support = Modernizr.csstransforms3d; if( this.support ) { this._init(); }
}
mlPushMenu.prototype = { defaults : { // overlap: there will be a gap between open levels // cover: the open levels will be on top of any previous open level type : 'overlap', // overlap || cover // space between each overlaped level levelSpacing : 40, // classname for the element (if any) that when clicked closes the current level backClass : 'mp-back' }, _init : function() { // if menu is open or not this.open = false; // level depth this.level = 0; // the moving wrapper this.wrapper = document.getElementById( 'mp-pusher' ); // the mp-level elements this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) ); // save the depth of each of these mp-level elements var self = this; this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } ); // the menu items this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) ); // if type == "cover" these will serve as hooks to move back to the previous level this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) ); // event type (if mobile use touch events) this.eventtype = mobilecheck() ? 'touchstart' : 'click'; // add the class mp-overlap or mp-cover to the main element depending on options.type classie.add( this.el, 'mp-' + this.options.type ); // initialize / bind the necessary events this._initEvents(); },

the specific line 89 is in the middle of that so here it is pulled out for your orientation

this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );

I have then called the instance of the plugin in my footer (thats the index line 1082

that call looks like this

<script> new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), { type : 'cover' } );
</script>

2 Answers

Your desktop site does not have an element with an ID of "mp-menu." When you call the getElementById method, you're getting null in response. This is then assigned to the el property of the object. When you attempt to call querySelectorAll, you're attempting to do so from a null value.

According to the comments on the question above, the mp-menu element is present on the mobile site alone. If this is the case, this code should also only be loaded on mobile.

The problem was that the JS files were being called on all platforms, desktop and mobile. while the mobile menu that used the mlPushMenu was only called on mobile devices. making it so the JS files were only called on mobile solved the problem for desktop browsers.