0

我有一个带有 javascript 和 localStorage 的简单程序。有一个等于 10 的变量槽。当我单击“扣除”时，它会递减。但问题是它在 document.getElementById('slot').innerText = "FULL"; 之前显示 0（零）会触发。我不知道为什么。我想要的是当插槽达到 0 时，它已经不显示零并且显示 FULL。

Javascript：

    window.onload = function(){
    slot = localStorage.getItem("slot");

    if (slot == null) {
        slot = 10;
    }

    document.getElementById("slot").innerText = slot;
    document.getElementById("button1").addEventListener('click', function(e){
        e.preventDefault();
        reduceSlot();
    })
}

function reduceSlot() {
    if (slot >= 1) {
        slot--;
        document.getElementById("slot").innerText = slot;
        localStorage.setItem("slot", slot);
    }
    else {
        document.getElementById('slot').innerText = "FULL";
        document.getElementById("button1").style.display = "none";
    }
}

HTML：

<p id="slot">10</p>
<a href="javascript:reduceSlot(1)" id="button1">Deduct</a>
<button onclick="window.localStorage.clear();">Clear All</button>

这是链接：http: //jsfiddle.net/K8stQ/

4

2 回答 2

1

问题是在你将其减为 0 之后，直到你下次点击时才会改变显示。当您更新 innerText 时，您需要在递减后立即做出该决定：

function reduceSlot() {
    if (slot >= 1) {
        slot--;
        localStorage.setItem("slot", slot);
        if (slot > 0) {
            document.getElementById('slot').innerText = slot;
        } else {
            document.getElementById('slot').innerText = "FULL";
            document.getElementById("button1").style.display = "none";
        }
    }
}

小提琴

于 2013-10-05T13:02:05.053 回答
1

目前还不是很清楚你想要什么，但如果你希望最后一个元素是1，那么这就是解决方案：

代替

if (slot >= 1) {

利用

if (slot > 1) { //simply "greater", instead of "greater or equal"

为什么需要这个？让我们清理一下这个块：

if (slot >= 1) { //checks if slot is greater than, or equal to 1. 
    slot--;     // **in this case**, equivalent to slot = slot-1;
    document.getElementById("slot").innerText = slot; //set the value of slot to element
    localStorage.setItem("slot", slot);
}
else {
    document.getElementById('slot').innerText = "FULL";
    document.getElementById("button1").style.display = "none";
}

现在让我们看看出了什么问题。

  • 方法调用

  • 插槽是2

    • 如果条件评估为true，则执行该分支
    • 插槽减少，插槽现在是1
    • slot( 1 ) 的值设置为元素
    • 方法结束

  • 再次调用方法

  • 插槽为1

    • 如果条件评估为true，则执行该分支
    • 插槽减少，插槽现在为0 —— 糟糕，这是我们不想要的
    • slot( 0 ) 的值被设置为元素
    • 方法结束

  • 再次调用方法

  • 插槽为0
    • 如果条件评估为false，则执行 else 分支
    • 值FULL设置为元素
    • 方法结束

那么要做什么：提前停止 1 步：不允许插槽达到 1...

于 2013-10-05T12:53:33.957 回答