Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    44
    Thanks
    21
    Thanked 1 Time in 1 Post

    Dynamically generate variable name

    Let's say I have a function like this:

    Code:
    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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • Users who have thanked devnull69 for this post:

    jkurrle (11-12-2012)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    best to use an object

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    jkurrle (11-12-2012)

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    44
    Thanks
    21
    Thanked 1 Time in 1 Post
    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?

    Code:
    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.
    Last edited by jkurrle; 11-12-2012 at 02:02 PM. Reason: logic change

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    var counter = 0;
    
    function foo(bar) {
       counter++;
       ...
    }

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    44
    Thanks
    21
    Thanked 1 Time in 1 Post
    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.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    So essentially you want to "attach" a counter to certain DOM elements? You could use the "data-XXXXX" attribute functionality for this
    Code:
    function foo(bar) {
       var myDiv = document.getElementById(bar);
       var counter = myDiv.getAttribute("data-counter") || 0;
       counter = Number(counter);
       counter++;
       myDiv.setAttribute("data-counter", counter);
       ...
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •