can't figure out where is the error in this code. Chrome debug console keep saying "Uncaught TypeError: Cannot call method 'addEventListener' of undefined" at line 31!

jewel.dom = (function() {

    var $ = Sizzle;

    function hasClass(el, clsName){

        var regex = new RegExp("(^|\\s) + clsName + (\\s|$)");
        return regex.test(el.className);
    }

    function addClass(el, clsName) {

        if (!hasClass(el,clsName)) {
            el.className += ""+ clsName;
        }
    }

    function removeClass (el, clsName) {

        var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
        el.className = el.className.replace(regex, " ");
    }

    function bind(element, event, handler) {

        if (typeof element == "string") {
            element = $(element)[0];
        }

        element.addEventListener(event, handler, false)
}

    return {
        $:$,
        hasClass : hasClass,
        addClass : addClass,
        removeClass : removeClass,
        bind : bind
    };
;}) ();

can't figure out where is the error in this code. Chrome debug console keep saying "Uncaught TypeError: Cannot call method 'addEventListener' of undefined" at line 31!

jewel.dom = (function() {

    var $ = Sizzle;

    function hasClass(el, clsName){

        var regex = new RegExp("(^|\\s) + clsName + (\\s|$)");
        return regex.test(el.className);
    }

    function addClass(el, clsName) {

        if (!hasClass(el,clsName)) {
            el.className += ""+ clsName;
        }
    }

    function removeClass (el, clsName) {

        var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");
        el.className = el.className.replace(regex, " ");
    }

    function bind(element, event, handler) {

        if (typeof element == "string") {
            element = $(element)[0];
        }

        element.addEventListener(event, handler, false)
}

    return {
        $:$,
        hasClass : hasClass,
        addClass : addClass,
        removeClass : removeClass,
        bind : bind
    };
;}) ();

• javascript
• dom

• 2 element does not exist. Please post the code which calls bind() and the code which definites element. – Teemu Commented Apr 17, 2012 at 11:01
• Found it! It was in another script the problem. I've used google chrome developer console e tracked the callback in the right script :D – Pasquale Sada Commented Apr 17, 2012 at 12:42

3 Answers 3

In my case, this is caused by Evernote Clipper extension script. You will find "Evernote" in ment when you click to that script who throws out the error.

Could it be the case that your bind invocation ends up with an undefined element? (e.g. you pass a selector that does not match any of the elements in your DOM)

some browsers don't know what "addEventListener" is. Try this:

Element.prototype.setEvent = function(eventName, handler)
{
    if(document.addEventListener)
    {
        this.addEventListener(eventName, handler);
    }
    else
    {
        if(document.attachEvent)
        {
            this.attachEvent("on" + eventName, handler);
        }
    }
}
element.setEvent(eventName, handler);

The same goes for removeEventListener.

Also, try to replace

 element = $(element)[0];

with

 element = $("#" + element);

provided that string contains the id of the element, or

 element = $("." + element)[0];

if the string contains the className of the element.