我無法在按鈕的第二次單擊上使用第二個功能

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> 

現在，您會發現，即使您沒有足夠的錢，仍然可以購買該產品。 我把它留給你解決這個問題。