CODEWITHSUNDEEP
javascriptjquery
user7293417
user7293417

Reputation: 107

Object doesn't support property or method 'addEventListener'

I am receiving an error on IE 8-7 saying that Object doesn't support property or method 'addEventListener' when I used the code below. Does anyone know how I can make the code below compatible with IE8-7? thanks

 document.getElementById('clear').addEventListener('click', function () {
  ["A1","A2","A3","A4","A5","A6", "A1_flip", 

  ].forEach(function(id) {
    document.getElementById(id).checked = false;
  });
  return false;
})

Upvotes: 1

Views: 36484

Answers (3)

Circle Hsiao
Circle Hsiao

Reputation: 1977

If you want a better compatibility to obsolete browsers plus not really all new features of jQuery are needed. You might consider just switch to jQuery 1.1X(currently 1.12). It will save you lots of time from handling compatible issues.

ref: jQuery - Browser support

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074208

That's because they don't support addEventListener. See this question's answers for details.

But since you've said you're using jQuery, you can...use jQuery to get around this issue:

$('#clear').on('click', function () {
  ["A1","A2","A3","A4","A5","A6", "A1_flip"
  ].forEach(function(id) {
    $("#" + id).prop("checked", false);
  });
  return false;
});

or actually, we can be a bit more direct:

$('#clear').on('click', function () {
  $("#" + ["A1","A2","A3","A4","A5","A6", "A1_flip"].join(", #")).prop("checked", false);
  return false;
});

...which works by building a selector string from the array.

I just realized I'm assuming the array's contents vary. If they don't, if you literally just want those specific elements:

$('#clear').on('click', function () {
  $("#A1, #A2, #A3, #A4, #A5, #A6, #A1_flip").prop("checked", false);
  return false;
});

...or better yet, give them a common class and use

$('#clear').on('click', function () {
  $(".the-class").prop("checked", false);
  return false;
});

If you don't use jQuery and just mis-tagged it, see the linked question above. One of the answers there is mine, providing a hookEvent function that deals with cross-browser event handling:

var hookEvent = (function() {
    var div;

    // The function we use on standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // The function we use on browsers with the previous Microsoft-specific mechanism
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    // Polyfill for preventDefault on old IE
    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    // Polyfill for stopPropagation on old IE
    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    // Return the appropriate function; we don't rely on document.body
    // here just in case someone wants to use this within the head
    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

Then:

hookEvent(document.getElementById('clear'), 'click', function(e) {
  ["A1","A2","A3","A4","A5","A6", "A1_flip"
  ].forEach(function(id) {
    document.getElementById(id).prop("checked", false);
  });
  e.preventDefault();
});

Upvotes: 1

Rion Williams
Rion Williams

Reputation: 76547

Support for addEventListener() function isn't available in older versions of Internet Explorer (i.e. 7-8), so you won't be able to use it on the browsers you are attempting to target.

You could consider wiring this up using jQuery's on() function, assuming you are using a version of jQuery that is designed to target older browsers as it will generally have the necessary fallbacks to support it.

$('#clear').on('click', function () {
   var elements = ["A1","A2","A3","A4","A5","A6", "A1_flip"];
   elements.forEach(function(id) {
         $("#" + id).prop("checked", false);
   });
   return false;
})

Upvotes: 1

Related Questions