javascript - 单击按钮添加或清除 localStorage 并以 html 格式显示值

Question

我有一个使用 localStorage 和 javascript 的代码。我尝试添加更多插槽，如 slot1、slot2、slot3，最多 5 个。我只是复制并粘贴，然后更改变量名称，如 slot1、slot2、slot3，最多 5 个。但它不起作用。非常感谢您的帮助。

Javascript:

var slot = localStorage.getItem("slot");

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

document.getElementById("slot").innerText = slot;

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";
        }
    }
}

document.getElementById("button1").onclick = reduceSlot;

function clearLocalStorage() {
    localStorage.clear();
}

HTML:

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

fiddle :http://jsfiddle.net/barmar/K8stQ/3/

Answer 1

不确定但是。这是你想做的吗？？ working demo

我稍微更改了您的代码..您可以稍后根据自己的喜好更改它..

 <span id="slot0">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(0)})()" ><br>

      <span id="slot1">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(1)})()" ><br>

      <span id="slot2">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(2)})()" ><br>

      <span id="slot3">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(3)})()" ><br>

      <span id="slot4">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(4)})()" ><br>


  <p>
  <button onclick="clearAll()">Clear All</button>
    </p>

对于 js...

ls = localStorage.getItem("slots") ;
if(!ls) {    localStorage.setItem("slots", "10,10,10,10,10");  
}

var slots = localStorage.getItem("slots").split(',').map(Number);

window.onload = updateSlots;

  function updateSlots() {  for(var i=0;i<slots.length;i++) {
document.getElementById('slot' + i ).innerHTML = slots[i] ;
}}



var  reduceSlot = function(slotId) {
  console.log(slots[slotId]) ;
  if(slots[slotId] >= 1) {
    slots[slotId]--; localStorage.setItem("slots",slots); 
     document.getElementById('slot' + slotId).innerHTML = slots[slotId];
  }


    else {      document.getElementById('slot'+slotId).innerText = "FULL";

        }
    };

function clearAll() {
  window.localStorage.clear();
  slots = [10,10,10,10,10];
  updateSlots();
}