Why won't this variable update?

Question

In the document.ready() I have:

$('#menu_indicator').append('<p>' + currPage + ' / ' + pageLimit + '</p>');

pageLimit is always one number that does not change throughout the whole code. I have it so that when a user clicks a button, it changes currPage to a different number. (this part is not in document.ready();)

Why doesn't it update it in the indicator? Any ideas to fix it?

Thanks

Answer 1

The reason your code doesn't work as you expect it to is that you only append it once, it doesn't attach a 'live' handler or something like it.

If you want the indicator to change each time you set a new value for currPage I'd build a function like so:

function setCurrentPage(page) {
    currPage = page;

    $("#menu_indicator p").html(currPage + " / " + pageLimit);
}

This is of course assuming currPage and pageLimit are declared on a global scope

Answer 2

Demo for Below Code : http://jsbin.com/oruqa3

HTML :

<input type="button" value="click" />
<div id="menu"></div>

JavaScript :

var currPage = 1, pageLimit = 20;
 $(function() {
  $('input[type=button]').click(function() {
   if(currPage <=pageLimit) {
    call();
    currPage++;
   } 
  }); 
 });


 var call = function() {
   $('#menu').html('<p>' + currPage + ' / ' + pageLimit + '</p>');
  }