CODEWITHSUNDEEP
javascriptarraysvariablesparameters
ardev
ardev

Reputation: 663

passing variables from function as argument

I am trying to pass an array that I have saved as a var. I declare the var in the parent function and add the arr as an argument in the parent function. Then I am pulling in the arr as an argument inside the callback invocation. The console tells me that linksA is undefined. 

var supportLists = function(selector, arr) {
    var parentList = document.getElementById(selector);
    var theList = parentList.querySelectorAll("a");

    var linksA = [
        "http://www.example.com",
        "http://www.example.com/path2",
        "1",
        "2",
        "4",
        "3",
        "5",
        "6",
        "7"
    ];

    var linksB = [
        "1",
        "2",
        "3"
    ];

    var linksC = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12"
    ];

    var linksD = [
        "1",
        "2"
    ];

    var linksE = [
        "1",
        "2",
        "3"
    ];

    var linksF = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6"
    ];

    var linksG = [
        "1",
        "2",
        "3"
    ];

    var linksH = [
        "1",
        "2",
        "3",
        "4"
    ];

    var linksI = [
        "1"
    ];

    var linksJ = [
        "1",
        "2",
        "3",
        "4",
        "5"
    ];

    function processLi(listItems, links) {

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

            listItems.forEach(function(item, index) {
                item.href = links[index];
                item.target = "_blank";

            });

        }
    }

    processLi(theList, arr);
};

supportLists("support-list", linksA);
supportLists("support-list-b", linksB);
supportLists("support-list-c", linksC);
supportLists("support-list-d", linksD);
supportLists("support-list-e", linksE);
supportLists("support-list-f", linksF);
supportLists("support-list-g", linksG);
supportLists("support-list-h", linksH);
supportLists("support-list-i", linksI);
supportLists("support-list-j", linksJ);

Upvotes: 0

Views: 64

Answers (2)

Amber Beriwal
Amber Beriwal

Reputation: 1598

At present, your variables are defined in local scope so they are not visible to code outside supportLists function.

Solution:

Define the variables outside the function. Example,

var linksB = ["1", "2", "3"];
var supportLists = function(selector, arr) {  //YOUR CODE  }

Upvotes: 0

Ma3x
Ma3x

Reputation: 6589

If you want to use a variable it has to be available in the scope where you want to use it or pass it (to a function), which means that it has to be declared in that scope or in a parent scope.

Since you are passing the arrays to the supportLists function you have to declare them outside that function.

If you move all the array declarations outside the function your code would look something like this (I have added a few comments to show where a scope begins and where it ends)

// This is the 'parent' scope (probably the global/window scope in your case)

var linksA = [
    "http://www.example.com",
    // ...
];

// ...

var linksJ = [
    "1",
    "2",
    "3",
    "4",
    "5"
];

var supportLists = function(selector, arr) {
    // Here begins the 'supportLists' function scope
    // The 'supportLists' function has access to this scope and the 'parent' scope
    var parentList = document.getElementById(selector);
    var theList = parentList.querySelectorAll("a");

    function processLi(listItems, links) {
        // Here begins the 'processLi' function scope
        // The 'processLi' function has access to this scope, the 'supportLists' scope and the 'parent' scope

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

            listItems.forEach(function(item, index) {
                // Here begins the 'function(item, index)' function scope
                // The 'function(item, index)' function has access to this scope, the 'processLi' scope, the 'supportLists' scope and the 'parent' scope

                item.href = links[index];
                item.target = "_blank";
            });// Here ends 'function(item, index)' function scope
            // Back in the 'processLi' function scope
        }
    } // Here ends the 'processLi' function scope
    // Back in the 'supportLists' function scope

    processLi(theList, arr);
}; // Here ends the 'supportLists' function scope
// Back in the 'parent' scope

supportLists("support-list", linksA);
supportLists("support-list-b", linksB);
supportLists("support-list-c", linksC);
supportLists("support-list-d", linksD);
supportLists("support-list-e", linksE);
supportLists("support-list-f", linksF);
supportLists("support-list-g", linksG);
supportLists("support-list-h", linksH);
supportLists("support-list-i", linksI);
supportLists("support-list-j", linksJ);

Upvotes: 1

Related Questions