Javascript - 将函数参数传递给变量名
[英]Javascript - Pass function argument into variable name
问题描述
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. 
我试图将函数参数传递给变量（如果可能的话）以减少代码重复性并嵌套if语句/ switch语句。 Through research, I discovered the getElementById reference would need to be place in quotes to show up as an id. 通过研究，我发现getElementById引用需要放在引号中以显示为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
}
3 个解决方案
解决方案1
3 2019-02-28 16:56:46
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];
}
};
解决方案2
0 2019-02-28 16:57:03
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) 你缺少的是用字符串参数调用函数..如func(3, 'red')而不是func(3, red)
and in javascript player_one[color] and not player_one.color 并在javascript player_one[color]而不是player_one.color
解决方案3
0 已采纳 2019-02-28 17:12:55
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.