1

Description of Problem:

I'm attempting to streamline some code, except that I'm obviously just creating a string instead of accessing the value of the respective variable(s). How can I convert 'total_' + animal into a variable that I can then access to dynamically assign results to the DIVs?

Code:

JS:

function tallyAnimals(animal) {
    total_animal++;
    if (animal == "dog")  { total_dog++;  }
    if (animal == "cat")  { total_cat++;  }
    if (animal == "bird") { total_bird++; }
    if (animal == "fish") { total_fish++; }

    //The problem line
    $('#' + animal).html('total_' + animal);
}

HTML:

<div id="animals">

    <div id="dog">0</div>
    <div id="cat">0</div>
    <div id="bird">0</div>
    <div id="fish">0</div>

</div>
daveycroqet
  • 2,667
  • 7
  • 35
  • 61

2 Answers2

2

since 'total_'+animal looks global, without eval : 

var function tallyAnimals(animal) {
    total_animal++;
    if (animal == "dog")  { total_dog++;  }
    if (animal == "cat")  { total_cat++;  }
    if (animal == "bird") { total_bird++; }
    if (animal == "fish") { total_fish++; }

    //The problem line
    $('#' + animal).html(window['total_' + animal]);
}

should work

EDIT :

Ideally , you shouldnt use global variables though, and attach 'total'+animal variables to a precise scope.

ex :

somewhere up in the file outside the function tallyAnimal:

var totals = {
   dog:0,
   cat:0,
   ...
}

so you can write 

$('#' + animal).html(totals[animal]);
mpm
  • 20,148
  • 7
  • 50
  • 55
  • Is it preferred to use a global variable in this manner as opposed to eval()? Which is better practice? – daveycroqet Mar 07 '14 at 03:43
  • 1
    eval is evil ! my point is unless you have a specific use case, you should not use eval, since you can resolve variable names dynamically according to their scope. I'm not saying that using a global variable is good though , but i'ts better than eval. – mpm Mar 07 '14 at 03:45
1

You can use the eval() function. Here is the solution:

function tallyAnimals(animal) {
    total_animal++;
    if (animal == "dog")  { total_dog++;  }
    if (animal == "cat")  { total_cat++;  }
    if (animal == "bird") { total_bird++; }
    if (animal == "fish") { total_fish++; }

    $('#' + animal).html(eval('total_' + animal));
}

Eval is made for this kind of work! You can also use less lines by doing this:

function tallyAnimals(animal) {
    total_animal++;
    eval("total_"+animal."++");
    $('#' + animal).html(eval('total_' + animal));
}
0x9BD0
  • 1,542
  • 18
  • 41
  • Thank you for the reply. I was told to avoid using eval() at all costs. Is this one of those rare exceptions? – daveycroqet Mar 07 '14 at 03:42
  • Building variables with eval can be dangerous because it can be used in a malicious way... You can read some more about it here: http://stackoverflow.com/questions/1594023/what-is-the-intended-purpose-of-eval-in-javascript – 0x9BD0 Mar 07 '14 at 03:47
  • I see. I think unless I understand it completely and thoroughly, I should probably shy away from it. Though you claim this is precisely what it was made for, so that piques my curiosity. :-) Thank you again. – daveycroqet Mar 07 '14 at 03:50