I have a code that uses localStorage and javascript. I tried to add more slots, like slot1, slot2, slot3 up to 5. I just copy and paste then change the variable names like like slot1, slot2, slot3 up to 5. But it won't work. Help will be appreciated so much.

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: /

I have a code that uses localStorage and javascript. I tried to add more slots, like slot1, slot2, slot3 up to 5. I just copy and paste then change the variable names like like slot1, slot2, slot3 up to 5. But it won't work. Help will be appreciated so much.

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/barmar/K8stQ/3/

• javascript
• html
• local-storage

• Your reduceSlot function seems to missing a parameter. You call it with reduceSlot(1). – Thilo Commented Oct 8, 2013 at 11:07
• but it won't work when i added reduceSlot(1) – newbie Commented Oct 8, 2013 at 11:11
• can you help me with this? @Thilo – newbie Commented Oct 8, 2013 at 11:24
• if someone had written a post solving this, what do you think the perfect title for that post would be? One that might help you find it in Google? Hold that thought.....then edit the title of your question to match :) – Paul Dixon Commented Oct 8, 2013 at 11:37
• Updated question title. – Anshad Vattapoyil Commented Oct 8, 2013 at 11:50

2 Answers 2

not sure but. is this what you want to do?? working demo

i changed your code a bit.. you can change it into your liking later..

 <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>

and for the 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();
}

Try this,

Script

window.ready = function() {
    checkStorage();
}

function checkStorage() {
    var slot = localStorage.getItem("slot");
    if (slot == null) {
       slot = 10;
    }
    document.getElementById("slot").innerHTML = slot;
}


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

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

function clear_me() {
    localStorage.clear();
    checkStorage();
}

HTML

<p id="slot">10</p>
<a href="javascript:void(null)" id="button1">Deduct</a>

<button id="clear">Clear All</button>

Demo