从函数中将 id 传递给 html 按钮

Question

这是我的旧代码，违反了 "Don't repeat yourself" 规则。我想修改它，所以我只使用一个功能。

我当前的代码：

//initialize player data
var player = {
  tech: 0,
  energy: 0,
};

//initialize tech building data
var engineer = {
  name: "Engineer",
  owned: 0,
  cost: 5,
  generates: 1
};

var android = {
  name: "Android",
  owned: 0,
  cost: 10,
  generates: 5
};

//购买功能

function addEngi(amount){
var cost = amount * engineer.cost;
  if cost  <= player.tech{
    engineer.owned += amount;
    player.tech -= cost ;
  }
  else {
    console.log("Not enough resources");
  }
  document.getElementById("Engineers").innerHTML = engineer.owned;
}

function addAndro(amount){
var cost = amount * android.cost;
  if cost  <= player.tech{
    android.owned += amount;
    player.tech -= cost ;
  }
  else {
    console.log("Not enough resources");
  }
  document.getElementById("Androids").innerHTML = android.owned;
}

Engineers: <span id="Engineers"></span><br />
<button type="button" class="btn btn-default" onclick="addEngi(1)">Buy 1</button>
<button type="button" class="btn btn-default" onclick="addEngi(5)">Buy 5</button>

Androids: <span id="Androids"></span><br />
<button type="button" class="btn btn-default" onclick="addAndro(1)">Buy 1</button>
<button type="button" class="btn btn-default" onclick="addAndro(5)">Buy 5</button>

如您所见，我需要为添加到游戏原型中的每个单元重复我的购买功能。

我的目标和想法是做这样的东西：

function testAdd(amount, building, id){
var cost = amount * building.cost;
  if (cost <= player.tech){
    building.owned += amount;
    player.tech -= cost;
    document.getElementById(id).innerHTML = building.owned;
   }
   else {
     console.log("Not enough resources");
   }

}

<button type="button" class="btn btn-default" onclick="testAdd(1, engineer, "Engineers")">Buy 1</button>

除了我需要传递 id 的部分外，一切似乎都正常。

Answer 1

尝试在 ID 周围使用单引号：

<button type="button" class="btn btn-default" onclick="testAdd(1, engineer, 'Engineers')">Buy 1</button>

从函数中将 id 传递给 html 按钮

Passing id to html button from the function

javascript

function

button