Simple if statement not working as intended

Question

I'm trying to create a simple counter, that counts 1 to 5 . Once the number is 5 , the next number should rewind back to 1 .

The problem occurs when I'm trying to rewind and the counter is 1 : it goes to 0, not back to 5 .

http://jsfiddle.net/tmyie/YMB3e/2/

var $i = 1;

$('.increase').click(function () {
    ++$i;
    $('p').text($i);
    if ($i == 5) {
        $i = 0;
    }
});

$('.decrease').click(function () {
    --$i;
    $('p').text($i);
    if ($i == 0) {
        $i = 5;
    }
});

What is the best way to avoid the counter going to 0 , and instead go back to 5 ?

Answer 1

Change your code to:

var $i = 1;

$('.increase').click(function () {
    ++$i;
    if ($i > 5) {
        $i = 1;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    --$i;
    if ($i <= 0) {
        $i = 5;
    }
    $('p').text($i);
});

DEMO

Answer 2

Wrong order of code. $('p').text($i); should be after if ($i == 0) { $i = 5 }

As @Anton said in the comments:

If you click decrease until it's 5 then click increase it will go above 5

So you need a few more changes:

var $i = 1;

$('.increase').click(function () {
    ++$i;
    if ($i > 5) {
        $i = 1;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    --$i;
    if ($i <= 0) {
        $i = 5;
    }
    $('p').text($i);
});

Working demo

Answer 3

change it like this

$('.decrease').click(function () {

$('p').text($i);
 --$i;
if ($i == 0) {
    $i = 5;
}
});

Demo

Answer 4

I think you need to amend your if statement here - if $i is 1 go to 5 otherwise take one off $i . Adjust the increase function likewise.

$('.increase').click(function () {
  if ($i == 5) {
    $i = 1;
  } else {
    ++$i;
  }
  $('p').text($i);
});

$('.decrease').click(function () {
  if ($i == 1) {
    $i = 5;
  } else {
    --$i;
  }
  $('p').text($i);
});

Fiddle

Answer 5

Assign the value after updating the variable:

var $i = 1;

$('.increase').click(function () {
    if (++$i == 6) {
        $i = 0;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    if (--$i == 0) {
        $i = 5;
    }
    $('p').text($i);
});

DEMO

OR use mod operator - %

var $i = 0;

$('.increase').click(function () {
    $i++;
    $('p').text($i%5+1);
});

$('.decrease').click(function () {
    $i = --$i==-1 ? 5 : $i;
    $('p').text($i%5+1);
});

DEMO

Answer 6

Answer:

You update the DOM, before you do your logic.

$('.increase').click(function () {
    ++$i;
    $('p').text($i); // <-- Update DOM
    if ($i == 5) {   // Logic after
        $i = 0;
    }
});

$i will never be 0 then. It will become 5 and then 1 on the next click

Fix:

$('.increase').click(function () {
    ++$i;            // Logic
    if ($i == 5)  
        $i = 0;
    $('p').text($i); // <-- Update DOM after
});

---

My Suggestion, as an alternative

To improve on the code, and make it easier to maintain, I would put it into a module, and make the code more scalable and reusable .

function Counter($count, $inc, $dec, settings) { // <- Make it into a Module
    settings = settings || {};
    var count = settings.initialCount || 0;
    var max = settings.max || 5;
    var min = settings.min || 0;
    $inc.click(function () {
       updateCount(1);
    });

    $dec.click(function () {
        updateCount(-1);
    });

    function updateCount(value){
        if(count+value > max) count = min;
        else if(count + value < min) count = max;
        else count += value;
        $count.html(count);
    }
    updateCount(0);

}
Counter($('.count'), $('.increase'), $('.decrease')); // <- Initiate the module

Fiddle with demo of reusability

http://jsfiddle.net/R5swH/3/

Answer 7

Try this

$('.increase').click(function (e) {
    $('p').text(($i==5?$i=0:++$i));
});

$('.decrease').click(function (e) {
    $('p').text(($i==0?$i=5:--$i));
});

DEMO