CODEWITHSUNDEEP
javascriptfunctionbutton
KoKsMAN
KoKsMAN

Reputation: 59

Passing id to html button from the function

This is my old code which goes against "Don't repeat yourself" rule. I want to modify it so I use only one function.

My current code:

//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
};

//Buy Functions

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>

As you can see, I need to repeat my buy function for every unit I add to my game prototype.

My goal and idea is to make something like this:

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>

Everything seems to work fine except for the part where I need to pass the id.

Upvotes: 0

Views: 32

Answers (1)

James Brierley
James Brierley

Reputation: 4670

Try using single quotes around the id instead:

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

Upvotes: 1

Related Questions