CODEWITHSUNDEEP
jqueryvariables
huddds
huddds

Reputation: 1045

jquery on link click add 1 to variable

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

Upvotes: 1

Views: 18248

Answers (3)

nienn
nienn

Reputation: 2200

As @Anthony said, when you do nextClicked = currentNextClicked + 1; you are always getting 1 as the result.

Also, you need to make the following if checks after every click and you can hide the a.prevButton on load as the nextClicked value will initially always be set to 0.

Try this:

http://jsfiddle.net/nienn/JesBR/18/

nextClicked = 0;

function onClickCheck(){

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

    }
    if(nextClicked == 3){

    }
    if(nextClicked == 4){

    }
}

$(document).ready(function() {

    $('a.prevButton').hide();
    $('a.nextButton').live('click', function(e){
        nextClicked += 1;        
        onClickCheck ();
        e.preventDefault();
    });

});​

Upvotes: 0

Sharlike
Sharlike

Reputation: 1789

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/

Upvotes: 2

Anthony Grist
Anthony Grist

Reputation: 38345

You initialise nextClicked and currentNextClicked both to 0, then in your click event handler you do this:

nextClicked = currentNextClicked + 1;

That will set nextClicked to 1, because 0 + 1 = 1. However, you never change the value of currentNextClicked, so the next time you click it's also still going to be setting nextClicked to the result of 0 + 1.

Upvotes: 0

Related Questions