IE Doesn't support forEach even with Polyfill.

Another way to make IE9+ support forEach:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <span class="demo">See me.</span>
    <span class="demo">See me.</span>
    <span class="demo">See me.</span>
    <span class="demo">See me.</span>
    <script>
        // Function to make IE9+ support forEach:
        if (window.NodeList && !NodeList.prototype.forEach) {
            NodeList.prototype.forEach = Array.prototype.forEach;
        }

        // Works with Nodelists (i.e. HTMLcollections):
        var demos = document.querySelectorAll('.demo');
        demos.forEach(function(item) {
            item.style.color = 'red';
        });

        // As well as with Arrays:
        var gherkins = ['gher1', 'gher2', 'gher3'];
        gherkins.forEach(function(item) {
            console.log(item);
        });
    </script>
</body>
</html>

Tested in IE11, and according to its emulate function, also works in 10 and 9 (not 8).


You are adding a prototype to the Array object and try to use it on a NodeList (which is what querySelectorAll returns instead of an array), that won't work. Make an Array out of the node List, or use

Array.prototype.forEach.call(document.querySelectorAll('[data-click]'), function (e) {
    // your code
});

Tags:

Javascript