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

何が必要かはあまり明確ではありませんが、最後の要素を にしたい場合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

    • condition がtrueと評価された場合、そのブランチが実行されます
    • スロットが減少し、スロットは1になりました
    • slot( 1 ) の値が要素に設定されます
    • メソッドは終了しました

  • 再度呼び出されたメソッド

  • スロットは1

    • condition がtrueと評価された場合、そのブランチが実行されます
    • スロットがデクリメントされ、スロットが0になりました -- おっと、これは私たちが望んでいないことです
    • slot( 0 ) の値が要素に設定されます
    • メソッドは終了しました

  • 再度呼び出されたメソッド

  • スロットは0です
    • condition がfalseと評価された場合、else ブランチが実行されます
    • 値FULLが要素に設定されます
    • メソッドは終了しました

では、何をすべきか: 1 ステップ前に停止します: スロット リーチ 1 を許可しないでください...

于 2013-10-05T12:53:33.957 に答える
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 に答える