Point System - localStorage

Question

I am creating a Point System, and once people get enough points, they can use some of the points to get cool features on my site. The using points part (detracting points each time the user gets something with their points) of the code is not working. Here is my jQuery for the Point System:

$(document).ready(function(){
   $('#curren').delay(200).animate({'top' : '-1px'},1500);
if (localStorage.points222){
  localStorage.points222=Number(localStorage.points222) +5;
}
else{
  localStorage.points222=0;
}
function buy5(){
  if (localStorage.points222){
  localStorage.points222=Number(localStorage.points222) -5;
}
else{
  localStorage.points222=0;
}
} 
   $('#point_counter').html(localStorage.points222);

if(Number(localStorage.points222) > 1){
   $('#point_name').html("1");
   $('#take').fadeIn();
}
else{
   $('#take').fadeOut();
} 
if(Number(localStorage.points222) > 500){
   $('#point_name').html("2");
}
if(Number(localStorage.points222) > 1000){
   $('#point_name').html("3");
}

if(Number(localStorage.points222) > 2000){
   $('#point_name').html("4");
}
if(Number(localStorage.points222) > 5000){
   $('#point_name').html("5");
}
if(Number(localStorage.points222) > 10000){
   $('#point_name').html("6");
}
if(Number(localStorage.points222) > 20000){
   $('#point_name').html("7");
}
});

and the HTML:

<div id="curren">
  Your Current Level: <b><span id="point_name"></span></b><br>
  Points: <b><span id="point_counter"></span></b>
  <span style="FLOAT:right;cursor:pointer;display:none;" id="take" onclick="buy5()">-5</span>
</div>

If you need more information on how the code is setup, please let me know.

Answer 1

Short answer: you never update the displayed amount of points. You misplaced a line.

The value in localStorage is indeed decreased by 5 every time a user clicks on the <span> and buy5() is called, but .. you never update the displayed value of points. In other words, the line..

$('#point_counter').html(localStorage.points222);

.. should be inside the definition of buy5 , when right now it is one bracket too far. It's not being called at the end of every buy5() , instead it's called just once, as part of $(document).ready() .