...

View Full Version : Dynamically generate variable name



jkurrle
11-12-2012, 02:40 PM
Let's say I have a function like this:



function foo(bar)
{
var myDiv=document.getElementById(bar);
var myCounter=0;
// addition code follows...
}


How can I change the myCounter variable name to reflect the "bar" passed variable? Basically, I would be using this function multiple times throughout the page and I don't want the counters to interfere with each other. My thought is that if I make the counter variables a variant of the passed "bar" variable, I can reuse the function throughout the page and not worry about any instance of it affecting a different instance of the function used elsewhere.

devnull69
11-12-2012, 02:47 PM
Because of the "var" keyword, none of the "myCounter" entities would have any effect on the others.

Omitting the var keyword would turn "myCounter" into a global variable. In that case any change in any function would affect the appearances in other functions that use the same global variable.

vwphillips
11-12-2012, 02:51 PM
best to use an object


function foo(bar)
{
var myDiv=document.getElementById(bar);
if (!foo[bar]){
foo[bar]={
cnt:0
}
}
// addition code follows...
foo[bar].cnt++;
}

jkurrle
11-12-2012, 03:02 PM
So, if declaring the counter using var makes it local to the function, would this be the correct way to initialize it in the following code snippet?



function foo(bar)
{
if (typeof counter == 'undefined') var counter = 0;
counter++;
var myDiv = document.getElementById(bar);
//additional code follows...
}


The idea being, as the function is called, it initializes the variable if it hasn't been called before. Otherwise, increment the variable by one.

devnull69
11-12-2012, 03:13 PM
I don't understand ... you wanted "counter" to be local ... and now you are trying to push it to being global?

If you want it to be global, just define and initialize it outside of your functions


var counter = 0;

function foo(bar) {
counter++;
...
}

jkurrle
11-12-2012, 03:19 PM
What I want to do is that whenever the function is called, its local counter gets incremented. So multiple copies of the function running are each keeping different counter values, depending on how many times the user activates each instance of the function.

So let's say function foo is used to make a copy of a div's contents. Calling foo(bar) will make a copy of bar's div and increment bar's counter every time a user presses a button tied to foo(bar). When the user clicks on a button tied to foo(baz), it copies baz's div instead and increments the counter for baz.

devnull69
11-12-2012, 03:53 PM
So essentially you want to "attach" a counter to certain DOM elements? You could use the "data-XXXXX" attribute functionality for this


function foo(bar) {
var myDiv = document.getElementById(bar);
var counter = myDiv.getAttribute("data-counter") || 0;
counter = Number(counter);
counter++;
myDiv.setAttribute("data-counter", counter);
...
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum