web-dev-qa-db-fra.com

uncaught typeError: impossible de lire la propriété 'querySelectorAll' de null

J'essaie d'utiliser ce menu pour mobile sur un site. http://tympanus.net/codrops/2013/08/13/multi-level-Push-menu/comment-page-8/#comment-466199

Je le fais fonctionner, mais un utilisateur ie11 signale une erreur et je vois l'erreur suivante dans la console Uncaught TypeError: Impossible de lire la propriété 'querySelectorAll' de nullmlPushMenu._init @ mlpushmenu.js: 89mlPushMenu @ mlpushmenu.js: 67 ( fonction anonyme) @ (index): 1062

Voici un extrait du fichier js en 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();
    },

la ligne spécifique 89 est au milieu de cela alors ici, il est tiré pour votre orientation 

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

J'ai ensuite appelé l'instance du plugin dans mon pied de page (c'est la ligne d'index 1082 

cet appel ressemble à ceci 

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

Votre site de bureau ne possède pas d'élément avec l'ID "mp-menu.". Lorsque vous appelez la méthode getElementById, vous obtenez null en réponse. Ceci est ensuite affecté à la propriété el de l'objet. Lorsque vous essayez d'appeler querySelectorAll, vous essayez de le faire avec une valeur null.

Selon les commentaires sur la question ci-dessus, l'élément mp-menu est présent sur le site mobile seul. Si tel est le cas, ce code devrait également être chargé uniquement sur le mobile.

10
Sampson

Le problème était que les fichiers JS étaient appelés sur toutes les plateformes, ordinateurs de bureau et mobiles. tandis que le menu mobile qui utilisait mlPushMenu était appelé uniquement sur les appareils mobiles. en faisant en sorte que les fichiers JS ne soient appelés que sur mobile, le problème des navigateurs de bureau a été résolu. 

0
Tom