Javascript - Pass function argument into variable name

Question

I am trying to pass a function argument into a variable (if this is possible) to reduce code repetitiveness and nested if statements/ switch statements. Through research, I discovered the getElementById reference would need to be place in quotes to show up as an id. The main question is, can I pass the argument into a variable name?

<body>
<div class="contain">
    <h3 id="red">0</h3>
        <h3 id="green">0</h3>
        <h3 id="blue">0</h3>
    <button onClick="player_one.addResource(4,green)">Add Green</button>
        <button onClick="player_one.addResource(3,red)">Add Red</button>
        <button onClick="player_one.addResource(7,blue)">Add Blue</button>
</div>

<script>
    var redResource = 0;
    var greenResource = 0;
    var blueResource = 0;

    var player_one = {
    addResource: function(num,color){
        (color)Resource += num
        document.getElementById(color).innerHTML =((color)Resource);
    }

    }

 </script>
 </body>
 --------------------------------------------------------------------
 --------------------------------------------------------------------
 //with a different approach, I still have an issue
  var player_one = {
addResource: function(num,color){
        player_one.color += num
        document.getElementById(color).innerHTML =    (player_one.color);
    },

  red: 0,
  green: 0,
  blue: 0


  }

your "different approach" will not work better. see my answer below — Mister Jojo
– Mister Jojo, Commented Feb 28, 2019 at 17:21

Taki · Accepted Answer · 2019-02-28 16:56:46Z

3

instead of variables, you can use an Object :

var resources = {
  red: 0,
  green: 0,
  blue: 0
};

var player_one = {
  addResource: function(num, color) {
    resources[color] += num;
    document.getElementById(color).innerHTML = resources[color];
  }
};

answered Feb 28, 2019 at 16:56

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soonerdev Over a year ago

This one did not trigger the id correctly. However, when I tried with an id already selected, the result of the innerHTML came back as NaN.

Mister Jojo · Accepted Answer · 2019-02-28 17:12:55Z

0

this is bad coding, but here is your answser:

var
  redResource = 0,
  greenResource = 0,
  blueResource = 0
;

var player_one = {
  addResource: function(num,color){
    window[color+'Resource'] += num;
    document.getElementById(color).innerHTML = window[color+'Resource'];
  }
}

#red { color:red }
#green { color:green }
#blue { color:blue }

<div class="contain">
  <h3 id="red">0</h3>
  <h3 id="green">0</h3>
  <h3 id="blue">0</h3>
  <button onClick="player_one.addResource(4,'green')">Add Green</button>
  <button onClick="player_one.addResource(3,'red')">Add Red</button>
  <button onClick="player_one.addResource(7,'blue')">Add Blue</button>
</div>

answered Feb 28, 2019 at 17:12

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

4 Comments

Soonerdev Over a year ago

This worked perfect as well. I actually came across the window[] approach at some point in my research, but could not get it to work. Can you explain why this would be considered bad coding? And the window[] approach is new to me. Is there a reference that teaches this?

Soonerdev Over a year ago

I changed to this answer, as it is the correct answer for the way the question was posed. Even though the creating object approach was a better solution to my overall goal. Is using the window[ ] approach the only way to insert the argument into the variable name?

Mister Jojo Over a year ago

while JS is object, but in your case, you should choose to create your own object as : var Ressource = { red:0, green:0, blue:0 }; and use it like : Ressource[color] += num;

Mister Jojo Over a year ago

[everything in JS is object]. using window[ variable name ] is not a good idea. there is many property and methods on this top object, like window.length or window.name... (window['length'], window['name'], ...). and maybe tomorow there where window['blue'], window['red'] in the global window scope and your code will not longuer working

ashish singh · Accepted Answer · 2019-02-28 17:13:46Z

0

it will be better to use object for it instead of doing some trickery

var player_one = {
addResource: function(num,color){

        player_one[color] += num
        document.getElementById(color).innerHTML =    (player_one[color]);
    },

  red: 0,
  green: 0,
  blue: 0


  }

// console.log(document.getElementById('green'))

<div class="contain">
    <h3 id="red">0</h3>
        <h3 id="green">0</h3>
        <h3 id="blue">0</h3>
    <button onClick="player_one.addResource(4,'green')">Add Green</button>
        <button onClick="player_one.addResource(3,'red')">Add Red</button>
        <button onClick="player_one.addResource(7,'blue')">Add Blue</button>
</div>

what you were missing was calling the function with string arguments .. as in func(3, 'red') and not func(3, red)

and in javascript player_one[color] and not player_one.color

edited Feb 28, 2019 at 17:13

answered Feb 28, 2019 at 16:57

ashish singh

6,9142 gold badges18 silver badges41 bronze badges

4 Comments

epascarello Over a year ago

(color)Resource you missed one

Soonerdev Over a year ago

This one did not trigger the id correctly. However, when I tried with an id already selected, the result of the innerHTML came back as NaN.

Soonerdev Over a year ago

This worked perfect! I tried it on my own page, but it still wasn't working. But I figured out I was using double quotes within the double quotes of the button. Changed to single quotes around the color, it worked. Thank you!

ashish singh Over a year ago

sure, i am glad :)

Collectives™ on Stack Overflow

Javascript - Pass function argument into variable name

3 Answers 3

1 Comment

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related