Reputation: 663
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
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
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