uncaught typeError: cannot read property 'querySelectorAll' of null

Question

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

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>

Answer 1

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.