Uncaught typeError: cannot read property 'querySelectorAll' from null

Question

I am trying to use this menu for mobile devices on a site. http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199

I have work, but one ie11 user reports an error, and I see the following error in the Uncaught TypeError console: Cannot read the 'querySelectorAll' property from nullmlPushMenu._init @ mlpushmenu.js: 89mlPushMenu @ mlpushmenu.js: 67 (anonymous function) @ (index): 1062

Here is a fragment 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, so it extends here for your orientation

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

Then I called the instance of the plugin in the footer (this is index line 1082

this call looks like this:

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

Answer 1

There is no item with the identifier "mp-menu" on your desktop. When you call the getElementById method, you get a null response. This property is then assigned to the el property of the object. When you try to call querySelectorAll, you try to do this with a null value.

In accordance with the comments on the above issue, the mp-menu element is present only on the mobile site. If so, this code should also be downloaded only to mobile.

Answer 2

The problem was that JS files were called on all platforms, on the desktop and on mobile devices. while the mobile menu using mlPushMenu was only called by mobile devices. so JS files were called only on mobile devices, they solved the problem for desktop browsers.