Question

I’m trying to add 1 to a variable when a next button is clicked which will show a hidden previous button but I can’t seem to get the add 1 part to work. I’ve pasted the code and a link to a jsfiddle below:

http://jsfiddle.net/huddds/JesBR/1/

HTML

  <a href="#" class="prevButton">PREVIOUS</a>
  <a href="#" class="nextButton">NEXT</a>

Javascript

 nextClicked = 0;
 currentNextClicked = nextClicked;

 $(document).ready(function() {

     $('a.nextButton').live('click', function(){
         nextClicked = currentNextClicked + 1;
         return false;
     });

     if(nextClicked == 0){
         $('a.prevButton').hide();    
     }
     if(nextClicked == 1){
         $('.prevButtonFalse').hide();
         $('.prevButton').show();

     }
     if(nextClicked == 2){

     }
     if(nextClicked == 3){

     }
     if(nextClicked == 4){

     }
 });​

CSS

 .nextButtonFalse{display:none;}
 .prevButtonFalse{display:none;}

Any help would be great, thanks in advance for any responses.

I’ve decided to go with this option:

HTML

 <div>Total : <span id="total">0</span></div>
 <input class="subtract" data-amount="1" type="button" value="PREVIOUS" />
 <input class="add" data-amount="1" type="button" value="NEXT" />

jQuery

 $(document).ready(function() {
   $('.add').click(function() {
      $('#total').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
   });
 })


 $(document).ready(function() {
   $('.subtract').click(function() {
      $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
   });
 })

​
http://jsfiddle.net/huddds/JesBR/20/
​
​
​

Answer 1

You are only checking the value of nextClicked on document load. Put it in the on live click handler. You also need to update the value of currentNextClicked. Maybe moving currentNextClicked = nextClicked; into the click handler is what you want?

$(document).ready(function() {
    $('a.nextButton').live('click', function(){
        currentNextClicked = nextClicked;
        nextClicked = currentNextClicked + 1;
        foo();
        return false;
    });

    foo();
});

function foo(){

    if(nextClicked == 0){
        $('a.prevButton').hide();    
    }
    if(nextClicked == 1){
        $('.prevButtonFalse').hide();
        $('.prevButton').show();
    }
    if(nextClicked == 2){

    }
    if(nextClicked == 3){

    }
    if(nextClicked == 4){

    }

}

http://jsfiddle.net/JesBR/19/