jQuery increment and decrement button to append the applied value to a number

Question

So I want something like this:

As you can see, there's a + and - button, to which if clicked, they show respective values appended at No. of Units.

All in all, what I want is:

for example, if I clicked the + four times, it will show 12+4 (the +4 part with green color)
and if I clicked the - six times, it will then show 12-2 (the -2 part with red color),
and if I clicked the - another ten times, it will stop at the value 12-12 and prompt/alert Do you really want to delete this load? (same function as the x button at the rightmost).

The problem you see is, the adding of increment values works (if I click the + many times), but if I decrement it, it would only stop at 0 and alternates between 0 and 1 (the operationg used is still + and not - though), and not to the maximum default value (which in the picture above, is 12).

Also, if I clicked a decrement button first, it will only stop at 0 and the same case, it alternates between 0 and 1.

Why is this? Sorry, I was not able to commit the previous two iterations of this code but both have issues too (the first one works but it appends a -n value, thus 12--1 would appear, the second one would bypass the def value limit, it would reach 12-14 and so on). I am at a loss here already, so I would like some help. This is my jQuery code below.

PS. I'm constructing the rows through a jQuery DataTables, so I can't show the code that adds the rows because it is not too relevant.

PS(2). Here's the JSFiddle implementation of the above.

PS(3). It would be very appreciated if you modify the code below to your liking, as log as it FOLLOWS SUIT the THREE USE CASES STATED ABOVE. Thank you so much.

jQuery

// For increment and decrement no. of units
var def = $('#costcenter_data tr').find('td:nth-child(2)').html(); // default value or the "12" in the example
var out = def;

// Increment button
$('.btn.btn-xs.btn-primary.add-unit').click(function(e){
    var count = $('#costcenter_data tr').find('td:nth-child(2)');
    var value = parseInt(count.data('change_value'));
    var clicked;

    if (isNaN(value) && isNaN(prev)) {
        value = 1;
        count.data('clicked', "+")
    } else {
        value++;
    }
    var prev = count.data('clicked');
    if (prev != "+") {
        clicked = "-";
    } else {
        clicked = prev;
    }

    $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
    count.data('change_value', value);
    count.data('clicked', "+");
});

// Decrement button
$('.btn.btn-xs.btn-warning.remove-unit').click(function(e){
    var count = $('#costcenter_data tr').find('td:nth-child(2)');
    var value = parseInt(count.data('change_value'));
    var clicked;

    if (isNaN(value) && isNaN(prev)) {
        value = 1;
        count.data('clicked', "-")
    } else if ((value-1) < 0) {
        value--;
        value = Math.abs(value);

        if (value == parseInt(def)) {
            alert("Delete prompt here");
            return false;
        }
    } else {
        value--;
        clicked = count.data('clicked');
    }
    var prev = count.data('clicked');
    if (prev != "-") {
        clicked = "+";
    } else {
        clicked = prev;
    }

    $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
    count.data('change_value', value);
});

Why do you use `Math.abs` ? Before you have decremented your value to `-1` and `Math.abs` will turn it to positive `1`. I guess this condition will invoke every time when value is negative, thats why your values always `0` or `1` — t1m0n, Apr 27 '16 at 09:03
Oh yeah, thanks for that @t1m0n. But I'm very confused now because I haven't committed the two previous iterations of this code. The first one was a working one but it appends another `-` because the value goes negative, so it goes `12--1`. The second one; the decrement would bypass the default value (12) and goes into a limitless number. A little help pls? Setting up a fiddle. — anobilisgorse, Apr 27 '16 at 09:11

t1m0n · Accepted Answer · 2016-04-27T16:32:19.533

I've looked at your fiddle, make some changes in if statements, seems like its working now - https://jsfiddle.net/oscsz4wt/.

I've add default clicked value so it could be accessible from the beginning and changed if logic. Also clicked may be renamed to scope or something like this, so it would be more clear I think.

// For increment and decrement no. of units
var def = $('#costcenter_data tr').find('td:nth-child(2)').html();
var out = def;
$('.btn.btn-xs.btn-primary.add-unit').click(function(e) {
  var count = $('#costcenter_data tr').find('td:nth-child(2)');
  var value = parseInt(count.data('change_value'));
  var clicked = count.data('clicked') || '+';

  // If no value
  if (isNaN(value) && isNaN(prev)) {
    value = 1;
    count.data('clicked', "+")
  // If value is positive - increase number
  } else if (value > 0 && clicked == '+') {
    value++;
  // If value is negative - decrease number
  } else if (value > 0 && clicked == '-') {
    value--;
  // If value is 0 - increase number and change scope to '+'
  } else if (value == 0) {
    value++;
    count.data('clicked', '+');
  }
  var prev = count.data('clicked');
  if (prev != "+") {
    clicked = "-";
  } else {
    clicked = prev;
  }

  $('#costcenter_data tr').find('td:nth-child(2)').html(out + clicked + value);
  count.data('change_value', value);
});
$('.btn.btn-xs.btn-warning.remove-unit').click(function(e) {
  var count = $('#costcenter_data tr').find('td:nth-child(2)');
  var value = parseInt(count.data('change_value'));
  var clicked = count.data('clicked') || '-';

  // If no value
  if (isNaN(value) && isNaN(prev)) {
    value = 1;
    count.data('clicked', "-")
  // If value is positive and we are in '+' scope decrease number
  } else if (value > 0 && clicked == '+') {
    value--;
  // If value is positive and we are in '-' scope increase number
  } else if (value > 0 && clicked == '-') {
    value++;
  // If value is 0 - increase number and change scope to '-'
  } else if (value == 0) {
    value++;
    count.data('clicked', '-');
  }

  if (value == parseInt(def) && clicked == '-') {
    alert("Delete prompt here");
    return false;
  }

  var prev = count.data('clicked');

  if (prev != "-") {
    clicked = "+";
  } else {
    clicked = prev;
  }

  $('#costcenter_data tr').find('td:nth-child(2)').html(out + clicked + value);
  count.data('change_value', value);
});

jQuery increment and decrement button to append the applied value to a number

jQuery

1 Answers1