Plus/minus counter with plus sign on result (jquery)

Question

I got this simple function that counts clicks (plus or minus). It works correctly. The fact is that negative values appear with the minus symbol in front of them (eg. -3), but it's not the same for positive ones.

Is there a way to have positive results show the plus symbol at the beginning (eg. +3)?

$('#increase').click(function() {
  $('#output').html(function(i, val) {
    return val * 1 + 1
  });
});

$('#decrease').click(function() {
  $('#output').html(function(i, val) {
    return val * 1 - 1
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button">+</button>
<button id="decrease" type="button">-</button>
<div id="output">10</div>

Rory McCrossan · Answer 1 · 2017-09-01T14:02:03.347

4

To achieve this you can simply check if the value is > 0, and if so prepend a + to it.

Also note that you can DRY up the code by using a data attribute on the button to specify the value to increment by. This means you can then use a single event handler on both buttons, like this:

$('button').click(function() {
  var $btn = $(this);
  $('#output').html(function(i, val) {
    val = val * 1 + $btn.data('inc');
    return (val <= 0 ? '' : '+') + val;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button" data-inc="1">+</button>
<button id="decrease" type="button" data-inc="-1">-</button>
<div id="output">+10</div>

edited Sep 01 '17 at 14:02

answered Sep 01 '17 at 11:59

Rory McCrossan

331,213
40
305
339

This produces "+0" return value at 0. Should add another check for "0". – Cheryl Velez Sep 01 '17 at 12:11
True, fixed it with `<=` – Rory McCrossan Sep 01 '17 at 14:02
Hi, thank you, would it be possible to set a max amount to the counter? I need it to stop counting over +11 and under -11 (need it to work only between -11 and +11 included) – Alberto Moneti Sep 01 '17 at 16:20

kevinSpaceyIsKeyserSöze · Answer 2 · 2017-09-02T17:14:14.357

0

$('#increase').click(function() {
    $('#output').html(function(i, val) { 
        if (val < 11) {
            var ret = val * 1 + 1;
        }
        return ret > 0 ? "+" + ret : ret;
    });
});
$('#decrease').click(function() {
    $('#output').html(function(i, val) { 
        if(val > -11) {
           var ret = val * 1 - 1;
        }
        return ret > 0 ? "+" + ret : ret;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button">+</button>
<button id="decrease" type="button">-</button>
<div id="output">+10</div>

edited Sep 02 '17 at 17:14

answered Sep 01 '17 at 11:58

kevinSpaceyIsKeyserSöze

3,693
2
16
25

1

`var ret = val * 1 + 1;` should be `var ret = val * 1 - 1;` in the decrease function. Also, recommend starting with +10 rather than 10 to maintain that "+" for positives. – Cheryl Velez Sep 01 '17 at 12:08
Hi, thank you, would it be possible to set a max amount to the counter? I need it to stop counting over +11 and under -11 (need it to work only between -11 and +11 included) – Alberto Moneti Sep 01 '17 at 16:20

Plus/minus counter with plus sign on result (jquery)

2 Answers2