Question

Can someone please tell me what’s wrong with this code? Chrome and Firefox are saying that scrns[i] is undefined though Chrome still runs the code on mouseover.

function nextPrev() {
  if (!document.getElementsByClassName) return false;
  var scrns = document.getElementsByClassName('scrn');
  for (var i=0; i<=scrns.length; i++) {
    // console.log(i);
    scrns[i].onmouseover = function() {
      // console.log('foo');
    }
  }
}
window.onload = nextPrev();

I’ve tested that the for loop is working and tried to pin down where the problem is coming from in every way I know how. I’m even looking at an example I took from a book sometime ago and cannot understand why scrns[i] would be undefined.

Any help greatly appreciated!

Answer 1

You’re using <= when looping through. But remember that arrays are indexed starting at 0, not 1. So an array with 10 elements has a length of 10, but elements 0-9. Change the following:

for (var i=0; i<=scrns.length; i++) {

to:

for (var i=0; i < scrns.length; i++) {