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!

• gen_Eric: window.onload = nextPrev(); should (probably) be window.onload = nextPrev;
• kitti: Also, you might look into jQuery. Your code could be written in 2 lines with jQuery.

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

• frank: I have no idea how that equals got there and didn't even see it, long day! thank you :)
• kitti: @frank I've had those days too. :)

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.