我一直在寻找一段时间来回答这个问题。
这是我的代码:
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
。
任何帮助表示赞赏!
答案 0 :(得分:2)
由于Closure,似乎是一个经典的变量范围问题。
在appendShopItem
中你有这个事件处理程序
radio.onclick = function () {
subTotal += shopItem.cost;
addValue( shopItem, subTotal );
};
绑定到eventHandler的subTotal是调用appendShopItem
时传递的内容。
因此,即使您将subTotal
重置为0
,仍然会绑定较早的值,并且只要单击单选按钮,就会使用旧值subTotal
。
您可以重构,以便subTotal
不被传递,但使其成为所有这些函数都可以访问的变量。