第二次按下按钮

Question

我无法使第二个功能起作用。 这是我需要帮助的代码： 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);
        }
    }
}

请帮助我！

Answer 1

每当您点击按钮时，clickCount和isStart值都会被设置回0和false。将两个值都放在函数之外：

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

修改

就像@Sebastien在答案的最后部分所说的那样，你也要重新声明money，所以一定要在函数之外声明一次。

Answer 2

每次执行该功能时都重新声明clickCount，因此将其重置为false ...

要保持clickCount的“全局”状态，您必须在外部将其定义为使用它的函数。

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

另请注意，您使用money变量执行相同操作，因此最终金额始终相同。

您必须在函数外声明var money = 10000;。在功能内部，您只需更改数量：money = money-2900;。

更新

以下是您基本上如何做到这一点。您需要做的就是跟踪全局变量中的资金。

现在，每次点击都会从剩余的钱中减去产品的成本。

查看有多少变量和检查是不必要的;）

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>

现在，您会注意到即使您没有足够的钱，您仍然可以购买该产品。我留给你解决这个问题。