There's many ways to solve your issue. One way would be to as described in other answers and put the check as part of your increment (add) and decrement (minus) functions. Those are very good solutions, and should be used in practice because they are (1) effective, and (2) easy to understand.
However, this is a good chance to show the beauty of the modulus operator, %.
Modulus gives you the remainder of a division operation, so 5 % 3 = 2, or 5 divided by 3 leaves you 2 left over. Here's a great explanation that goes much further into depth, but as long as we understand it's just giving
us the remainder, we should be fine.
Modulo arithmetic is very helpful for looping through rings of values, such as your numbers 0-10, then back to 0. We'll see how soon, but first let's go through some of the other solutions. Suppose your counter started at 9, and you used
the increment function
function add() { value++; };
After calling add twice, you would be at 11, just like you're seeing with your code.
So then you write the better function,
function add_checked() {
if (value < 10) { // handle cases 0-9
value++;
} else {
value = 0; // handle case 10
}
};
This will solve your problem, but is kind of ugly. You can compress the if statement into one line using ternary operators (ie, one-line-ifs), like so:
function add_checked_ternary() { value = (value < 10) ? (value + 1) : 0; };
This roughly translates to (1) check if value is less than 10, (2) if so, use the value value + 1, (3) otherwise use the value 0, and (4) set value to whatever value you're using. Just as complicated.
Modulo lets us avoid this branching logic. Try the function
function add_limited() { value = (value + 1) % 11; };
When value = 9, add_limited will add 1, and then take the remainder modulo 11.
Since 10 can't be broken into 11 pieces, 10 % 11 = 10 and value will be 10. When
we call add_limited again, we add 1 and take the remainder again. 11 can be broken up exactly by 11, and so we have no remainder, 11 % 11 = 0. This makes
value 0 instead of 11. All the values except for 10 get 1 added to them like normal, since they all stay less than 11. 10 loops back to 0, exactly as desired!
Now, even though we want to celebrate because we just did something really cool, there is one more thing to think about: the negative side. Just like your increment function needs to wrap around when it goes above 10, your decrement function needs to wrap when it goes below 0. Let's start with value = 1, and skip to minus_checked.
function minus_checked() {
if (value > 0) { // handle cases 1-10
value--;
} else {
value = 10; // handle case 0
}
};
When value > 0, it decrements as usual, and when value = 0 it loops around. Let's try and make a modulus version (we leave minus_checked_ternary to the reader).
function minus_limited_broken() { value = (value - 1) % 11; };
As you may have guessed, this version is broken, as when value = 0, -1 % 11 = -1. Unfortunately, javascript remainders don't convert negatives to positive like google calculator does. But we can do it manually. Suppose we added 11 to our answer. Then 0 would become 10 instead of -1, but 1 would be 11 instead of 0, 2 would be 12 instead of 1, and so on until 10 would be 20 instead of 9. This isn't what we wanted, but notice that 10 % 11 = 10, 11 % 11 = 0, 12 % 11 = 1, and so on until 20 % 11 = 9. These are all the numbers we were looking for, so we can build our minus_limited:
function minus_limited_v1() { value = (value - 1 + 11) % 11; };
or
function minus_limited() { value = (value + 10) % 11; };
Who ever thought you could do subtraction by adding a number? Either way, modulo is a great way of creating wrap-around logic. One last thing, since we're only adding or subtracting 1, a better name for these functions would be increment and decrement, or inc and dec.
