addEventlistener function gives error in internet explorer

Question

addEventlistener function gives error in internet explorer

1.1k Views Asked by Tiemen Tuinstra At 03 December 2014 at 13:33

I have the following code which is used for a mixitup filter, this code regulates the input from an input range and sets it to a checkbox which is checked it works in every browser except for internet explorer (tested in ie11). I think it has something to do with the initial function.

var p = document.getElementById("range"),
    res = document.getElementById("output");

p.addEventListener("input", function () {

        $("output").html(p.value);

    var classes = "";   
    var minimal = 0;
    var maximal = p.value;
    $("input[type='range']").attr({'data-filter': "."+ maximal});
    $("input[type=checkbox].budget").val('.'+maximal);

    $( ".active" ).each(function( index ) {

      var thisClass = $(this).attr("data-filter");
      if (thisClass == '#mix.activiteiten') {
      } else {
          if (thisClass != 'undefined') {

            classes += thisClass + ',';
          }
      }
    });
    if (classes.length > 0) {
        var replaced = classes.replace('undefined', '');

        var matching = 0;
        var arrClasses = replaced.split(",")
    }


}, true);

p.addEventListener("change", function() {
    var $show = $('#FilterContainer').find('#mix.activiteiten').filter(function(){
        var price = Number($(this).attr('data-budget'));
        if (classes.length == 0) {

            return price >= minimal && price <= maximal;

        } else {
            for (index = 0; index < arrClasses.length; index++) {
                var thisValue = arrClasses[index].replace('.', '');

                if ($(this).hasClass(thisValue) && price >= minimal && price <= maximal) {

                    matching = 1;
                    return (price >= minimal && price <= maximal);

                }

            }   
        }

    }); 
        $('#FilterContainer').mixItUp('filter', $show);

}, true);

`

Original Q&A

There are 3 best solutions below

**rfornal** · Answer 1 · 2014-12-03T13:52:46.650000

Try this ... by using the jQuery On, you can ensure better response across browsers and versions.

var p = document.getElementById("range"),
   res = document.getElementById("output");

    $("#range").on("input", function () { 
       ...    
    }, true);

    $("#range").on("change", function() {
       ...    
    }, true);

**A.B** · Answer 2 · 2014-12-03T13:55:53.110000

A.B On 03 December 2014 at 13:55

In older IE attachEvent method works instead of addEventListner

see Docs

**Lance Leonard** · Answer 3 · 2014-12-03T17:37:21.303000

If you're interested in a cross-browser approach, try creating a function that handles the feature detection for you. Here's one way that might help as a starting point:

function registerEvent( sTargetID, sEventName, fnToBeRun ) 
{
   var oTarget = document.getElementById( sTargetID );
   if ( oTarget != null ) 
   {
      if ( oTarget.addEventListener ) {   
         oTarget.addEventListener( sEventName, fnToBeRun, false );
      } else {
         if ( oTarget.attachEvent ) 
         {
            oTarget.attachEvent( sOnEvent, fnToBeRun );
         }
      }
   }
}

Note that this function makes a few assumptions that you may wish to expand in in order to incorporate this into production code, such as error checking, fallback to attribute based event handlers, and so on. Still, it may serve as a proof of concept.

Also, those claiming that IE predominately relies on attachEvent are referring to older versions of IE. Starting with IE9, addEventListener is not only supported, it's recommended for IE. To learn more, see:

The IE Blog is a good way to stay up-to-date on the latest news and best practices for IE. (For example, here's the entry talking about why you should use addEventListener instead of attachEvent.)

Hope this helps...

-- Lance

P.S. If 'addEventListener' doesn't seem to be working for you, trying adding <!DOCTYPE html> as the first line of your HTML file. To learn more, see How to enable standards support.

P.P.S. If you create a personal library of such functions, you can greatly reduce the amount of time it takes you to incorporate common tasks into new projects.

addEventlistener function gives error in internet explorer

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in INTERNET-EXPLORER

Related Questions in MIXITUP

Trending Questions

Popular # Hahtags

Popular Questions