"Exploring the concept of Undefined in Javascript Arrays

Question

"Exploring the concept of Undefined in Javascript Arrays

I keep encountering the issue links[i] is undefined. Even after explicitly defining it, the error persists. Any thoughts on why this might be happening?

I am attempting to implement unobtrusive image rollovers for 5 links that I currently have.

function loadImages(){
    path = 'uploads/Splash-4/nav/'; 
    links = new Array();

    for (i=1;i<=5;i++){
        var id = "link-"+i;
        var defaultState = '<img src="' +path+i+'.jpg" border="0" />';
        links[i] = document.getElementById(id);

        // Insert all image links into anchor
        links[i].innerHTML = defaultState;

        // Mouseover action
        links[i].onmouseover = function() { 
            links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
        }
        // Mouseout action
        links[i].onmouseout = function() {
            links[i].innerHTML = defaultState;
        }
    }
}
window.onload = loadImages;

HTML:


    <a href="?page=Profile" id="link-1"></a>
    <a href="?page=for-sale" id="link-2"></a><br />
    <a href="?page=testimonials" id="link-3"></a><br />
    <a href="?page=free-home-appraisal" id="link-4" /></a><br />
    <a href="?page=contact-me" id="link-5"></a><br />

javascript arrays

Answer 1

Answer №1

To begin with, it is recommended to start by declaring:

var links = [];

Using the Array constructor directly is not advised, and failing to use var will lead to the links variable being stored in the global scope, which is generally undesirable.

Moving on to address your specific issue.

Your event handlers are referencing the variables path and i from the outer scope, but when they are actually executed, the variable i holds the value of 6 -- contrary to what you intended! To rectify this, you can update the code as follows:

    // Actions to take on mouseover
    links[i].onmouseover = function() { 
        links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
    }
    // Actions to take on mouseout
    links[i].onmouseout = function() {
        links[i].innerHTML = defaultState;
    }

to

    // Actions to take on mouseover
    links[i].onmouseover = (function(path, i) {
        return function () {
            links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
        };
    })(path, i);
    // Actions to take on mouseout
    links[i].onmouseout = (function(i) {
        return function () {
            links[i].innerHTML = defaultState;
        }
    })(i);

This approach creates a new closure to encapsulate the desired variables. Consequently, the inner i can retain a value like 3 while the outer i assumes the value of 6.

Answer 2

To begin with, it is recommended to start by declaring:

var links = [];

Using the Array constructor directly is not advised, and failing to use var will lead to the links variable being stored in the global scope, which is generally undesirable.

Moving on to address your specific issue.

Your event handlers are referencing the variables path and i from the outer scope, but when they are actually executed, the variable i holds the value of 6 -- contrary to what you intended! To rectify this, you can update the code as follows:

    // Actions to take on mouseover
    links[i].onmouseover = function() { 
        links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
    }
    // Actions to take on mouseout
    links[i].onmouseout = function() {
        links[i].innerHTML = defaultState;
    }

to

    // Actions to take on mouseover
    links[i].onmouseover = (function(path, i) {
        return function () {
            links[i].innerHTML = '<img src="' +path+i+'a.jpg" border="0" />';
        };
    })(path, i);
    // Actions to take on mouseout
    links[i].onmouseout = (function(i) {
        return function () {
            links[i].innerHTML = defaultState;
        }
    })(i);

This approach creates a new closure to encapsulate the desired variables. Consequently, the inner i can retain a value like 3 while the outer i assumes the value of 6.

Answer 3

Answer №2

The issue arises when the onmouseover() function is triggered, setting your variable i = 6 due to the previous iteration setting it as such, ultimately ending the loop prematurely. To avoid this, you need to safeguard the value of i in some manner. One approach is:

function loadImages(){
    path = 'uploads/Splash-4/nav/'; 
    var links = [];

    for (i=1;i<=5;i++){
        (function(j) {
            var id = "link-"+j;
            var defaultState = '<img src="' +path+j+'.jpg" border="0" />';
            links[j] = document.getElementById(id);

            // Populate all image links into anchor
            links[j].innerHTML = defaultState;

            // Define behavior on mouseover
            links[j].onmouseover = function() { 
                links[j].innerHTML = '<img src="' +path+j+'a.jpg" border="0" />';
            }
            // Define behavior on mouseout
            links[j].onmouseout = function() {
                links[j].innerHTML = defaultState;
            }
        })(i);  // Invoke the anonymous function with i to preserve its value for
                // the mouseover/mouseout events

    }
}

Answer 4

The issue arises when the onmouseover() function is triggered, setting your variable i = 6 due to the previous iteration setting it as such, ultimately ending the loop prematurely. To avoid this, you need to safeguard the value of i in some manner. One approach is:

function loadImages(){
    path = 'uploads/Splash-4/nav/'; 
    var links = [];

    for (i=1;i<=5;i++){
        (function(j) {
            var id = "link-"+j;
            var defaultState = '<img src="' +path+j+'.jpg" border="0" />';
            links[j] = document.getElementById(id);

            // Populate all image links into anchor
            links[j].innerHTML = defaultState;

            // Define behavior on mouseover
            links[j].onmouseover = function() { 
                links[j].innerHTML = '<img src="' +path+j+'a.jpg" border="0" />';
            }
            // Define behavior on mouseout
            links[j].onmouseout = function() {
                links[j].innerHTML = defaultState;
            }
        })(i);  // Invoke the anonymous function with i to preserve its value for
                // the mouseover/mouseout events

    }
}

Answer 5

Answer №3

Your current code snippet is missing the declaration of the variable links. If this variable has not been defined elsewhere (i.e., if it's a local variable), you will need to declare it in this section:

Instead of

links = new Array();

You should consider using

var links = new Array();

An example showcasing this can be seen here.

If you have already declared it earlier on, the issue could potentially lie with this line of code:

document.getElementById(id);

This might be returning null.

Answer 6

Your current code snippet is missing the declaration of the variable links. If this variable has not been defined elsewhere (i.e., if it's a local variable), you will need to declare it in this section:

Instead of

links = new Array();

You should consider using

var links = new Array();

An example showcasing this can be seen here.

If you have already declared it earlier on, the issue could potentially lie with this line of code:

document.getElementById(id);

This might be returning null.

"Exploring the concept of Undefined in Javascript Arrays

Answer №1

Answer №2

Answer №3

Similar questions

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

Customizing Passport JS Bearer strategy for various endpoints and HTTP REST operations

Turning JSON data into an array format, omitting the keys

What is the best way to store a downloaded video from the server?

The custom error page in NextJS is failing to display

Error: Unable to access the currentTime property as it is not defined

What is the origin of this mysterious error?

Combine loop results into a string using jQuery

JavaScript function issue with automatic tabbing

Change the blue line to a crisp, clean white

What is the method for generating a binary numpy array with two columns from a list of strings?

Customize the yellow background color of Safari's autofill feature by following these simple

Disabling scrolling on body while scrolling a superimposed element

Do I need to include a callback in my AWS Lambda handler function?

Personalizing a Doughnut Graph

In Reactjs, you can prevent users from selecting future dates and times by modifying the KeyboardDateTimePicker component

Positioning divs around a circle can be quite challenging

Rendering HTML with jQuery using AJAX: Step-by-step guide

Incorporating AJAX in jQuery mobile to transmit data to a controller in CodeIgniter

Error injecting Angular components