Possible to change button text once condition is met?-CodePudding

Is it possible to change the text of a button once a condition is met?

I want the "???" on the second button to change to "Buy Reputation" once the variable ShackTot is greater than or equal to 5. Do I have to use a span tag for this?

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

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

<html>

<head>
  <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()">???</button>
</head>

</html>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Change Button Text</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Change text of input button
    $("#myInput").prop("value", "Input New Text");
    
    // Change text of button element
    $("#myButton").html("Button New Text");
});
</script>
</head>
<body>
    <input type="button" id="myInput" value="Input Text">
    <button type="button" id="myButton">Button Text</button>
</body>
</html>

CodePudding user response：

You have to add an id or on the button and you can change innerHtml for that element when your condition is met.