I am trying to have the "ShackTot" variable automatically update on-screen when the "Buy Reputation" button is pressed.
It should work similarly to how the "Cash" variable decreases as the "Buy Shack" button is clicked where the "Cash" on-screen automatically decreases when the "Buy Shack" button is clicked.
The "ShackTot" variable does decrease as the "Buy Reputation" button is clicked but you need to click the "Buy Shack" button for it to update on-screen.
var Cash = 150000;
var ShackCost = 50;
var Shack = 0;
var ShackTot = 0;
var ShackTotCost1 = 50;
var ShackOut = 1;
var Reputation = 0;
var ReputationCost = 1;
var ReputationTot = 0;
var ReputationTotCost1 = 1;
function buyShack() {
if (Cash >= ShackCost) {
Cash = Cash - ShackCost;
Shack = Shack + 1;
ShackCost = Math.round(ShackCost * 1);
ShackCount = Shack;
ShackTotCost1 = ShackCost;
document.getElementById("Cash").innerHTML = Cash;
document.getElementById("ShackTot").innerHTML = ShackCount;
// document.getElementById("ShackTotCost").innerHTML = ShackTotCost1;
}
}
function buyReputation() {
if (Shack >= ReputationCost) {
Shack = Shack - ReputationCost;
Reputation = Reputation + 1;
ReputationCost = Math.round(ReputationCost * 1);
ReputationCount = Reputation;
ReputationTotCost1 = ReputationCost;
ShackCount = Shack;
document.getElementById("ReputationTot").innerHTML = ReputationCount;
// document.getElementById("ReputationTotCost").innerHTML = ReputationTotCost1;
document.getElementById("ShackTot").innerHTML = ShackCount;
}
}<h1>Cash: <span id="Cash">150000</span></h1>
<h1>Shacks: <span id="ShackTot">0</span></h1>
<h1>Reputation: <span id="ReputationTot">0</span></h1>
<button onclick="buyShack()">Buy Shack</button>
<button onclick="buyReputation()">Buy Reputation</button>