Why won't this variable update?

In the document.开发者_JAVA技巧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

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

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>');
  }