Question

我一直在寻找一段时间来回答这个问题。

这是我的代码：

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（＆＃34;重置＆＃34;按钮），subTotal应该回到0。但是，再次点击该按钮会使subTotal进入60，而不是默认为0，然后成为10。

任何帮助表示赞赏！

Answer 1

由于Closure，似乎是一个经典的变量范围问题。

在appendShopItem中你有这个事件处理程序

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

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

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

您可以重构，以便subTotal不被传递，但使其成为所有这些函数都可以访问的变量。

在Javascript中将变量重置为0

1 个答案: