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 patible 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;
}) 

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 patible 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;
}) 

• javascript
• jquery

• You've tagged your question jQuery, but you're not using any jQuery in the question. This issue is one of the things people use jQuery for. – T.J. Crowder Commented Apr 12, 2017 at 14:32
• what kind of element have this id? You tagged you question as HTML you should share your html code also – CMartins Commented Apr 12, 2017 at 14:34
• 1 Please take care to tag correctly. This question has nothing to do with any of these tags: css3, function, frontend, or html. It does have to do with javascript. – T.J. Crowder Commented Apr 12, 2017 at 14:40

3 Answers 3

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 mon 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-pliant 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();
});

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;
}) 

If you want a better patibility 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 patible issues.

ref: jQuery - Browser support