22

I am having issues getting a JS loop to work over 4 elements on a page in IE11. I want the function hideImg to run on mouseover on the element that you hovered over.

Here is my code:

elements.forEach( function(element) {
    element.addEventListener('mouseover', hideImg);
});

I think I've found that forEach loops are not supported in IE, how can I easily convert this to a for loop in plain JS?

Kind regards,
Steve

Machavity
  • 30,841
  • 27
  • 92
  • 100
Steve Walker
  • 271
  • 1
  • 3
  • 5

4 Answers4

24

You can do it like this:

var elements = document.getElementsByClassName("test");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mouseover', hideImg);
}

function hideImg() {
  console.log("hideImg called")
}
.test {
  width: 40px;
  height: 20px;
  border: green solid 1px;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Nemani
  • 778
  • 5
  • 12
  • 3
    Thanks so much this works great in IE. Why do you think my question has been downvoted? I am a beginner to JS. – Steve Walker Nov 28 '17 at 15:16
  • 2
    It was a simple question and you should have explored it on your on, if you are a beginner, you should first go through basics like conditional statements, loops, functions and Objects. MDN is good source to start with https://developer.mozilla.org/bm/docs/Web/JavaScript – Nemani Nov 28 '17 at 15:27
  • Okay, thanks for the feedback, and thanks again for your help. – Steve Walker Nov 28 '17 at 15:38
  • 1
    @SteveWalker grab a modern browser if you're going to try examples from the internet. IE11 is one of the older supported browsers around and is missing a number of features you'll find in Edge, Chrome & Firefox. – toxaq Feb 14 '18 at 04:30
  • 1
    @SteveWalker Do mark this as the right answer if it helped you solve your issue. Cheers. – AndrewL64 Jan 19 '19 at 20:11
  • This doesn't necessarily answer the question. OP was asking about `foreach` alternatives, like the answer specified below. There will be times in which using a for loop is inappropriate. – Jessica Dec 31 '19 at 14:28
19

This code will fix your issue in IE 11.

Array.prototype.slice.call(elements).forEach( function(element) {
    element.addEventListener('mouseover', hideImg);
});
Shailendra Dobhal
  • 191
  • 1
  • 4
10

Just add this to your code at the top of it the code provided is supported in all Browsers

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
Vince
  • 776
  • 11
  • 21
3

Can also use the somewhat more compact:

Array.prototype.forEach.call(elements, function(element) {
    element.addEventListener('mouseover', hideImg);
});

Or even more compact:

[].forEach.call(elements, function(element) {
    element.addEventListener('mouseover', hideImg);
});

Note that some programmers prefer to avoid the latter method because it creates an otherwise unused empty array.

Mike Godin
  • 3,727
  • 3
  • 27
  • 29