Question

我有一个简单的javascript和localStorage程序。有一个等于10的变量槽。当我点击“Deduct”时，它会减少。但问题是它在document.getElementById（'slot'）之前显示0（零）。innerText =“FULL”;会触发。我不知道为什么。我想要的是当插槽达到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/

Answer 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 - OOPS，这是我们不想要的
- slot（ 0 ）的值设置为元素
- 方法结束
再次调用的方法
广告位 0
- 如果条件评估为 false ，则执行else分支
- 将值 FULL 设置为元素
- 方法结束

那么还有什么要做：先停一步：不要让插槽达到1 ......

Answer 2

问题是在将其减小到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";
        }
    }
}

FIDDLE

我希望0不会显示，在FULL之前保持显示0

2 个答案: