Toggle addition/subtraction in jQuery

Question

I'm looking to grab the current value of a div and on a toggle of another div add or subtract to that current value.

The flow would look something like this:

Get current value
On click once add '10'
On second click subtract '10'
Return new value

So far I've com up with this. The problem is that it goes from addition to subtraction through the first two clicks but on the third click it stays at subtraction.

$("#clickThis").click(function(e){
    e.stopPropagation();
    var costVal = parseInt($("#cost").text(),10);
    var costNewVal = costVal + 22;
    var costOldVal = costNewVal - 22;
    $("#cost").toggle(
        function(){
            $(this).text(costNewVal);
            console.log("Addition");
        },
        function(){
            $(this).text(costOldVal);
            console.log("Subtraction");
        }
    );
});

A JsFiddle can be found here.

alou · Answer 1 · 2014-03-26T17:15:42.533

You can have a data attribute with the value to add or subtruct and * -1 it every time to get the reverse number

  $("#clickThis").click(function(e){
    var addThis = parseInt( $(this).data('plusminus') );
    var newVal = parseInt( $("#cost").text() ) + addThis;
    $('#cost').text(newVal);
    $(this).data('plusminus', addThis * -1);
  });

fiddle link

This makes it usable for many fields with different values, if you need to make any variations.

Edit: forgot to add the html with the data attribute:

  <div data-plusminus="25" id="clickThis">Click This</div>
  <div id="cost">25.00</div>

Anoop Joshi P · Accepted Answer · 2014-03-26T16:53:39.060

1

Try this

     var flag=false;
$("#clickThis").click(function(e){
    e.stopPropagation();
    var costVal = parseInt($("#cost").text(),10);
        if(flag)
    {
         $("#cost").text(costVal-22);
    }
    else
    {
        $("#cost").text(costVal+22);
    }
       flag=!flag;
});

Demo

edited Mar 26 '14 at 16:53

answered Mar 26 '14 at 16:25

Anoop Joshi P

25,373
8
32
53

This almost worked. It's changing the value of "#clickThis" instead of "#cost". I need to click "#clickThis" and have it change the value of "#cost" – Ryan Rich Mar 26 '14 at 16:34
is that what you want? – Anoop Joshi P Mar 26 '14 at 16:47
No sorry that doesn't work. On click it just keeps the current value and then on each subsequent click it adds 22. I need it to add 22 to the current value of "#cost" (25 in the jsfiddle) on the first click and then subtract 22 on the second click, add 22 on third, subtract on fourth, etc. (every other). I updated the fiddle with your code. http://jsfiddle.net/w8gX8/4/ – Ryan Rich Mar 26 '14 at 16:50

score 1 · Answer 3 · edited May 23 '17 at 12:23

1

.toggle(function,function) was deprecated at version 1.8 and removed from JQuery at version 1.9.

If you need that functionality and are on version 2.1 like the JSFiddle shows you can use the answer from the question linked below to implement something that works just like the removed toggle.

What to use instead of toggle(…) in jQuery > 1.8?

edited May 23 '17 at 12:23

Community

1
1

answered Mar 26 '14 at 16:48

Dan

2,625
7
39
52

Toggle addition/subtraction in jQuery

3 Answers3