javascript - 在Javascript中将变量重置为0

我已经四处寻找了答案。

这是我的代码：

function appendShopItem(shopItem, subTotal)
{
    // Create the list item:
    var item = document.createElement( 'li' );

    // Set its contents:
    item.appendChild( document.createTextNode(
        shopItem.name + ' - ' + shopItem.cost + ' Gold'
    ) );

    // Add it to the list:
    list.appendChild( item );

    var radio = document.createElement( 'button' );
    var text = document.createTextNode( "Buy " + shopItem.name + " for " + shopItem.cost + " Gold");
    radio.name = 'shop';
    radio.value = shopItem.name;
    radio.onclick = function () {
        subTotal += shopItem.cost;
        addValue( shopItem, subTotal );
    };

    radio.appendChild( text );
    document.body.appendChild( radio );

    var lineBreak= document.createElement("BR");
    document.body.appendChild(lineBreak);
}

function addValue(shopItem, subTotal)
{
    document.getElementById("extraSubHeader").innerHTML = "Current Total: " + subTotal + " Gold"
}

function enterShop(position, locationNames, locationDescriptions, buttons, buttonActions, shopItems, shopCosts)
{
    subTotal = 0;

    document.getElementById("extraHeader").style.visibility = "visible";
    document.getElementById("extraHeader").innerHTML = "Welcome to the Shop!";

    document.getElementById("extraSubHeader").style.visibility = "visible";
    document.getElementById("extraSubHeader").innerHTML = "Current Total: 0 Gold"

    document.getElementById("list").style.visibility = "visible";


    document.getElementById("option1").style.visibility = "hidden";
    document.getElementById("option2").style.visibility = "hidden";
    document.getElementById("optionalInfo").style.visibility = "hidden";
    document.getElementById("subHeader").style.visibility = "hidden";
    document.getElementById("actionButton").innerHTML = "Leave Shop";
    document.getElementById("actionButton").onclick = function (){ loadData(position, locationNames, locationDescriptions, buttons, buttonActions, shopItems, shopCosts); hideShop(); }
    document.getElementById("header").style.visibility = "hidden";

    for( var i = 0;  i < shopItems.length;  ++i )
    {
        appendShopItem( shopItems[i], subTotal );
    }

    var clearButton = document.createElement("BUTTON");
    var text = document.createTextNode("Clear Selection");
    clearButton.onclick = function () {
        subTotal = 0;
    };
    clearButton.appendChild(text);
    document.body.appendChild(clearButton);
}

变量subTotal根据您选择的物品的价格而增加。如果我多次单击按钮，则subTotal会增加。效果很好，但是还有一个按钮可以重置总数。这就是问题所在。即使我将subTotal设置为0，它仍然从上次停止的地方继续增加。

例如，如果项目的价格为10，则单击按钮5次将使subTotal变为50。如果再单击Clear Selection（“重置”按钮），则subTotal应该回到0。但是，再次单击该按钮将使subTotal变为60，而不是默认为0然后变为10。

任何帮助表示赞赏！

最佳答案

由于闭包，似乎是经典的变量范围界定问题。

在appendShopItem中，您具有此事件处理程序

radio.onclick = function () {
    subTotal += shopItem.cost;
    addValue( shopItem, subTotal );
};

绑定到eventHandler的subTotal是调用appendShopItem时传递的值。

因此，即使将subTotal重置为0，仍然会绑定一个较早的值，并且一旦单击单选按钮，就会使用subTotal的旧值。

您可以进行重构，以使subTotal不会被传递，但是可以使它成为所有这些函数均可访问的变量。

关于javascript - 在Javascript中将变量重置为0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31302422/