Javascript - передать аргумент функции в имя переменной - PullRequest
Новая
       1

Javascript - передать аргумент функции в имя переменной

0 голосов
/ 28 февраля 2019

Я пытаюсь передать аргумент функции в переменную (если это возможно), чтобы уменьшить повторяемость кода и вложенные операторы if / switch.В ходе исследований я обнаружил, что ссылку 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


  }

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

будет лучше использовать объект для него, а не делать какие-то хитрости 

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>

то, что вам не хватало, вызывало функцию со строковыми аргументами .. как в func(3, 'red'), а не func(3, red)

и в javascriptplayer_one[color], а не player_one.color

0 голосов
/ 28 февраля 2019

это плохое кодирование, но вот ваш ответ: 

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>
0 голосов
/ 28 февраля 2019

вместо переменных вы можете использовать объект: 

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

var player_one = {
  addResource: function(num, color) {
    resources[color] += num;
    document.getElementById(color).innerHTML = resources[color];
  }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...