Hello all,
I’m struggling a bit with trying to make sure when I set an event handler (or listener) on some element which calls a function I’ve got elsewhere, that the function can’t see necessary vars because they’ve already been garbage collected.
I’m following the type of setup as in Simply Javascript or the Javascript Live course.
So I have stuff like this
var SomeObj = {
init: function() {
set up vars and event handlers/listeners
},
somefunc: function() {
does stuff;
},
anotherfunc: function() {
does stuff;
},
yetanotherfunc: function() {
does stuff;
},
lastfunc: function() {
does stuff;
}
};
This can keep my functions separate and can be used by multiple elements.
But, often the element who is calling the function is deep inside some for loop or bunch of for loops, looping through a nodeList or whatever.
I don’t know how to get those passed to the functions.
Here’s an example I’ve got right now:
var SomeObj = {
init: function() {
var inputs = document.forms['someForm'].elements;
other unrelated vars...
//loop through inputs, give them a tabIndex
for (var i=0, j=inputs.length; i<j; i++) {
inputs[i].autoTabIndex = i;
var someRegex = /%$#%$#*/;
//test if the input's id matches someRegex;
//if so, set the function to that input
if (someRegex.test(inputs[i].id)) {
inputs[i].onkeyup = autoTab;
}
}
}, //init
autoTab: function() {
if (this.value.length === this.maxLength && this.autoTabIndex < j) {
inputs[this.autoTabIndex + 1].focus();
}
}
};
Here, I loop through inputs and set a tab index on them. I state a pattern I’m looking for in the id, and if it matches, run the autoTab function.
autoTab needs to check if the input has been “filled” to its maxlength (set in the HTML) and also then make sure it’s not the last input (though I’m sure no disaster would happen if it was… the function would just have to exit). It then has to see who the next input in line is and move the focus over.
But autoTab can only see “this”, and cannot see “j” (who is declared in the for loop above) or “inputs” (who is declared outside the for loop in the init function). I keep getting this idea I should be able to get inputs from the inputs[i] or this but not sure how (it’s not like inputs is actually a parentNode or anything).
I don’t know if I should try returning these vars out into the open or if there’s some other way I can pass these to the function. I’ve tried clumsily adding these vars as arguments to the function, but obviously I’m doing it wrong. I also figured since the function is called from inside the for loop, it should be able to “see” than environment, not just the particular element calling it.
I would like to “get” this concept much better so I can just make and call functions when I want without being unsure if I’m passing everything I need to pass. What ends up happening is I end up moving the separate functions back into the main one until I have all these functions floating around everywhere together. It becomes a mess and I can’t get the benefits of external event listeners.
Thanks
poes