Object doesn’t support property or method ‘addEventListener’

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

Leave a Comment