JavaScript变量重置问题：eraseData函数无法恢复初始值

This is my first independent beginner JavaScript project that implements three distinct phone purchasing modes:

• Automatic mode: Spend all available funds to buy as many phone + protective mask bundles as possible (requires enough money for both items together)
• Manual mode: Purchase phones one at a time (no masks included)
• Quantity-specified mode: Buy a set number of phone + mask bundles

The project uses global variables like bankBalance, aPhones, and aMasks to track state, but I ran into an issue with the eraseData() function: it only updates the page display with reset values, but doesn't actually reset the global variables to their initial state (since it declares new local variables instead of modifying the global ones).

JavaScript Code #

const PHONE_PRICE = 150.00;
const MASK_PRICE = 50;
var bankBalance = 1983;
var aPhones = 11;
var aMasks = 11;
var boughtPhones = 0;
var boughtMasks = 0;

function eraseData(){
    var bankBalance = 1800;
    var aPhones = 11;
    var aMasks = 11;
    var boughtPhones = 0;
    var boughtMasks = 0;
    var check = false;
    var quantity = 0;
    document.getElementById("money").innerHTML = "Money left: $" + bankBalance;
    document.getElementById("phones").innerHTML = "Amount of phones: " + boughtPhones;
    document.getElementById("masks").innerHTML = "Amount of phone masks: " + boughtMasks;
}

function updateData(){
    document.getElementById("money").innerHTML = "Money left: $" + bankBalance;
    document.getElementById("phones").innerHTML = "Amount of phones: " + boughtPhones;
    document.getElementById("masks").innerHTML = "Amount of phone masks: " + boughtMasks;
}

checkOptions();

function checkOptions(){
    var check = prompt("There is three different ways to buy a phone. (A)utomatically, (M)anually and by (Q)uantity. Choose one option.")
    if(check == "A"){
        buyPhoneA();
    } else if(check == "M"){
        buyPhoneM();
    } else if(check == "Q"){
        buyPhoneQ();
    } else{
        alert("That's not a valid option!");
    }
}

function buyPhoneA(){
    alert("With this option you automatically spend all your money ($" + bankBalance.toFixed(2) + ") and buy all available phones and phone masks! (take in notice that you can't buy one if you don't have money for the other!)");
    var check = prompt("Type I AGREE if you agree to use this option!");
    if(check == "I AGREE" && aPhones >= 1 && aMasks >= 1 && bankBalance >= 200.00){
        while(bankBalance >= PHONE_PRICE + MASK_PRICE){
            aPhones--;
            aMasks--;
            boughtPhones++;
            boughtMasks++;
            bankBalance = bankBalance - PHONE_PRICE - MASK_PRICE;
            updateData();
            var check = false;
        }
    } else{
        alert("Something went wrong! Either you didn't type I AGREE correctly, we don't have phones left or you don't have enough money!");
        console.log(aPhones + " phones left");
        console.log(aMasks + " masks left!");
        console.log(boughtMasks + " bought masks!");
        console.log(boughtPhones + " bought phones!");
        console.log(bankBalance + " money left in the bank");
        checkOptions();
    }
}

function buyPhoneM(){
    alert("With this options we will ask your over and over again to buy a phone! You can decline or agree to buying a new one! No accessories included");
    var check = prompt("Type I AGREE if you agree to do this option!");
    if(check == "I AGREE" && bankBalance >= 150.00 && aPhones >= 1){
        aPhones--;
        boughtPhones++;
        bankBalance = bankBalance - PHONE_PRICE;
        updateData();
        buyPhoneM();
        var check = false;
    } else{
        alert("Something went wrong! Either you didn't type I AGREE correctly, we don't have any phones left or you don't have enough money!");
        checkOptions();
    }
}

function buyPhoneQ(){
    var quantity = 0;
    alert("With this option you will be asked to input a number of phones and accessories you want to buy!");
    var check = prompt("Type I AGREE if you agree to use this option!");
    if(check == "I AGREE"){
        var quantity = prompt("Input a number of how many phones and accessories you want to buy!")
        if(bankBalance >= 200.00 && aPhones >= 1 && aMasks >= 1){
            aPhones + aPhones - quantity; // Note: This line doesn't modify aPhones - should be aPhones -= quantity;
            aMasks = aMasks - quantity;
            bankBalance = bankBalance - ((PHONE_PRICE + MASK_PRICE) * 2); // Note: Calculation error - should be (PHONE_PRICE + MASK_PRICE) * quantity
            boughtPhones = boughtPhones + quantity;
            boughtMasks = boughtMasks + quantity;
            updateData();
            var check = false;
        } else{
            alert("Something went wrong! Either the message your typed is not a number, you don't have enough money, we don't have enough masks or phones!");
            buyPhoneQ();
        }
    }
}

HTML Code #

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <p id="money">Money left: $1800</p>
    <p id="phones">Amount of phones: 0</p>
    <p id="masks">Amount of phone masks: 0</p>
    <br><br>
    <button onclick="eraseData();">Erase Data</button>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Quick Fixes to Note #

• Fixing eraseData(): To properly reset global variables, remove the var keyword before each variable inside the function. This ensures you modify the global variables instead of creating local copies:

  function eraseData(){
      bankBalance = 1800;
      aPhones = 11;
      aMasks = 11;
      boughtPhones = 0;
      boughtMasks = 0;
      // ... rest of the UI update code
  }
  

• buyPhoneQ() bugs: The function has two logic errors (marked in comments) that need correction to properly update inventory and balance based on the requested quantity.

内容的提问来源于stack exchange，提问作者JakeC