I can’t get the second function to work on the second click of the button

Question

I can't get the second function to work. Here is the code that I need help with: HTML:

<fieldset>
  <legend>Store</legend>
  <p id="p"></p>
  Spaceship: $2900
  <input type="button" value="Buy" onClick="buy()" />
</fieldset>

JS:

function buy() {
    var isStart = false;
    var clickCount = 0;
    if (!isStart) {
        clickCount++;
        if (clickCount == 1) {
            var money = 10000;
            money = money - 2900;
            $("#p").text(money);
        }
        if (clickCount == 2) {
            var money = 10000;
            money = money - 2900 * 2;
            $("#p").text(money);
        }
    }
}

Please help me!

Answer 1

your clickCount and isStart values are being set back to 0 and false whenever you click the button. put both values outside of the function:

    var isStart = false;
    var clickCount = 0;
    var money=10000;
    function buy() {
        if  (!isStart) {
            clickCount++;
            if (clickCount == 1) {
                money=money-2900;
                $("#p").text(money);
            }
            if (clickCount == 2) {
                money=money-2900;
                $("#p").text(money);
            }
        }
    }

EDIT

Like @Sebastien says in the last part of his answer, you're also redeclaring money as well, so be sure to only declare that once, outside of the function.

Answer 2

You redeclare clickCount every time you execute the function and therefore reset it to false...

To maintain a "global" state for clickCount , you must define it outside the function that uses it.

 var clickCount = 0; function buy() { var isStart = false; if (!isStart) { clickCount++; if (clickCount == 1) { console.log('clickCount == 1'); var money = 10000; money = money-2900; $("#p").text(money); } if (clickCount == 2) { console.log('clickCount == 2'); var money = 10000; // Reset here, so the result is the same money = money-2900; $("#p").text(money); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <legend>Store</legend> <p id="p"></p> Spaceship: $2900 <input type="button" value="Buy" onClick="buy()" /> </fieldset>var clickCount = 0; function buy() { var isStart = false; if (!isStart) { clickCount++; if (clickCount == 1) { console.log('clickCount == 1'); var money = 10000; money = money-2900; $("#p").text(money); } if (clickCount == 2) { console.log('clickCount == 2'); var money = 10000; // Reset here, so the result is the same money = money-2900; $("#p").text(money); } } } 

Also note that you do the same thing with the money variable so the final amount is always the same.

You must declare var money = 10000; outside the function. Inside the function you only change the amount like: money = money-2900; .

UPDATE

Here is how you would basically do it. All you need to do is keep track of the money in a global variable.

Now, on every click you will subtract the cost of the product from the remaining money.

See how many variables and checks were unnecessary ;)

 var money = 10000; function buy() { money = money-2900; $("#p").text(money); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <legend>Store</legend> <p id="p"></p> Spaceship: $2900 <input type="button" value="Buy" onClick="buy()" /> </fieldset> 

Now, you will notice that you can still buy the product even when you don't have enough money. I leave it to you to solve that problem.