javascript issue undefined variable in array

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++) {

Answer 2

You are looping too far. If i is equal to scrns.length then it is beyond the end of the array. Remove the = in your stop condition:

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

Answer 3

You have an off by one error. Changing <= to < should fix your issue. You can use loop invariants in the future to make sure that you don't go over.

http://en.wikipedia.org/wiki/Loop_invariant

In general though, when looping through an array, begin with the iterating counter at 0 and then loop so long as the counter is less than the length of the array.