Dynamically generate variable name

[jkurrle]

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]

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]

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]

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]

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]

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]

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);
   ...
}