Counter small issue (does not work smoothly)

Question

In this jsfiddle below you will notice that the incrementing or the decrementing(?) does not work perfectly well - It goes one number off (up or down) - I am looking for a way to make it perfect.

http://jsfiddle.net/Sergelie/8d3th1cb/3/

<div data-role="page">
<div data-role="content">
    <input id="button" type="button" value="+" /> 
    <input id="button2" type="button" value="-" /> 
</div>
</div>

The idea is to go from 0 up to unlimited, and down to stop at 0 (not to -1 the way it does right now).

var count = 1;
$("#button").on('click', function () {
$(this).val(count++).button("refresh");
});
$("#button2").on('click', function () {
if (count>-1)
$("#button").val(count--).button("refresh");
});

j08691 · Answer 1 · 2016-04-11T18:52:59.897

1

You can use the prefix operator (++count/--count) instead (initializing count to 0):

var count = 0;
$("#button").on('click', function() {
  $(this).val(++count).button("refresh");
});
$("#button2").on('click', function() {
  if (count > 0)
    $("#button").val(--count).button("refresh");
});

jsFiddle example

edited Apr 11 '16 at 18:52

answered Apr 11 '16 at 18:50

j08691

204,283
31
260
272

your `if (count > -1)` line needs to be updated to `if (count > 0)`. – David Apr 11 '16 at 18:51
Perfect thanks! (and I changed to "if (count > -0)" - so it does not go in the negative - Thanks a lot! – Sergelie Apr 11 '16 at 18:54

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Use ++count and --count instead so that the values are incremented/decremented before and the value of the expression is the final value:

var count = 1;
$("#button").on('click', function() {
    $(this).val(++count).button("refresh");
});
$("#button2").on('click', function() {
    if (count > 0) $("#button").val(--count).button("refresh");
});

See also: ++someVariable Vs. someVariable++ in Javascript

score 0 · Answer 3 · answered Apr 11 '16 at 18:59

var count = 0;
$("#button").on('click', function () {
    $(this).val(++count).button("refresh");
});
$("#button2").on('click', function () {
    if (count>0)
        $("#button").val(--count).button("refresh");
});

Read about the position of increment and decrement operators here.

Counter small issue (does not work smoothly)

3 Answers3