Javascript - передать аргумент функции в имя переменной
Я пытаюсь передать аргумент функции в переменную (если это возможно), чтобы уменьшить повторяемость кода и вложенные операторы if/операторы переключения. В ходе исследований я обнаружил, что ссылку на getElementById нужно заключать в кавычки, чтобы она отображалась как идентификатор. Главный вопрос, могу ли я передать аргумент в имя переменной?
<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
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
вместо переменных вы можете использовать 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];
}
};
Этот не активировал идентификатор правильно. Однако, когда я попытался с уже выбранным идентификатором, результат innerHTML вернулся как NaN.
будет лучше использовать объект для этого вместо того, чтобы делать какие-то трюки
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.info(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>чего вам не хватало, так это вызова функции со строковыми аргументами.. как в func(3, 'red'), а не func(3, red)
и в javascript player_one[color] а не player_one.color
(color)Resource вы пропустили один
Этот не активировал идентификатор правильно. Однако, когда я попытался с уже выбранным идентификатором, результат innerHTML вернулся как NaN.
Это сработало идеально! Я попробовал это на своей странице, но это все равно не сработало. Но я понял, что использовал двойные кавычки внутри двойных кавычек кнопки. Изменил на одинарные кавычки вокруг цвета, это сработало. Спасибо!
конечно, я рад :)
это плохое кодирование, но вот ваш ответ:
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>Это также сработало идеально. На самом деле я столкнулся с подходом window[] в какой-то момент своего исследования, но не смог заставить его работать. Можете ли вы объяснить, почему это считается плохим кодированием? И подход window[] для меня нов. Есть ли ссылка, которая учит этому?
Я изменил этот ответ, так как это правильный ответ для того, как был поставлен вопрос. Хотя подход с созданием объектов был лучшим решением для моей общей цели. Является ли использование подхода window[] единственным способом вставить аргумент в имя переменной?
в то время как JS является объектом, но в вашем случае вы должны создать свой собственный объект как: var Ressource = { red:0, green:0, blue:0 }; и использовать его как: Ressource[color] += num;
[все в JS является объектом]. использование окна [имя переменной] не является хорошей идеей. в этом верхнем объекте есть много свойств и методов, таких как window.length или window.name... (window['length'], window['name'], ...). и, возможно, завтра там, где окно ['синий'], окно ['красный'] в глобальной области окна, и ваш код больше не будет работать
ваш "другой подход" не будет работать лучше. смотри мой ответ ниже