Uncaught Typeerror: Cannot read Property 'addeventlistener' of null

Question

I am using a script from a modal window, but is causing the error and Error Uncaught TypeError: Cannot read property 'addEventListener' of null and error: at Array.forEach (native)

Complete code:

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {   return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); }

// classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {   hasClass = function( elem, c ) {
    return elem.classList.contains( c );   };   addClass = function( elem, c ) {
    elem.classList.add( c );   };   removeClass = function( elem, c ) {
    elem.classList.remove( c );   }; } else {   hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );   };   addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }   };   removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );   }; }

function toggleClass( elem, c ) {   var fn = hasClass( elem, c ) ? removeClass : addClass;   fn( elem, c ); }

var classie = {   // full names   hasClass: hasClass,   addClass: addClass,   removeClass: removeClass,   toggleClass: toggleClass,   // short names   has: hasClass,   add: addClass,   remove: removeClass,   toggle: toggleClass };

// transport if ( typeof define === 'function' && define.amd ) {   // AMD   define( classie ); } else {   // browser global   window.classie
= classie; }

})( window );

/**  * modalEffects.js v1.0.0  * http://www.codrops.com  *  * Licensed under the MIT license.  * https://www.opensource.org/licenses/mit-license.php  *   * Copyright 2013, Codrops  * http://www.codrops.com  */ var ModalEffects = (function() {

    function init() {

        var overlay = document.querySelector( '.md-overlay' );

        [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

            var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                close = modal.querySelector( '.md-close' );

            function removeModal( hasPerspective ) {
                classie.remove( modal, 'md-show' );

                if( hasPerspective ) {
                    classie.remove( document.documentElement, 'md-perspective' );
                }           }

            function removeModalHandler() {
                removeModal( classie.has( el, 'md-setperspective' ) );              }

            el.addEventListener( 'click', function( ev ) {
                classie.add( modal, 'md-show' );
                overlay.removeEventListener( 'click', removeModalHandler );
                overlay.addEventListener( 'click', removeModalHandler );

                if( classie.has( el, 'md-setperspective' ) ) {
                    setTimeout( function() {
                        classie.add( document.documentElement, 'md-perspective' );
                    }, 25 );
                }           });

            close.addEventListener( 'click', function( ev ) {
                ev.stopPropagation();
                removeModalHandler();           });

        } );

    }

    init();

})();

Answer 1

I suppose you’re trying to add an event to a null, for example:

var overlay = document.querySelector( '.md-overlay' );

If there is no 'Md-overlay' just below you have this section :

overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );

And this gives exactly the error you are mentioning, you can do a test debugging your code with console.log() and see who is null or Undefined, since ensure that the elements you need and use to add events are not null or Undefined, 'cause that’s definitely gonna make a mistake. I hope I’ve helped!