number incrementing in Angular.js

Question

I'm attempting to build an app that calculates sales metrics. I have run into an unusual problem in my build.

Part of the app allows users to increase/decrease a variable by 5% and then see how that will effect an overall metric. It also allows the user to see the percentage increase/decrease.

I have the functionality working roughly as intended, however if I enter a number lower than 20 into the input and then try in increase it with my incrementing function it only increments once and then stops.

If the number I enter into the input is 20 or greater it increments in the intended way.

Below is my angular code:

function controller ($scope) {
    $scope.firstNumber = 0;
    $scope.firstPercent = 0;

    $scope.increase = function(id) {

        var A = parseInt(id);
        var B = A * 5/100;    
        var C = 0;

        var C = A + B;

        if (id === $scope.firstNumber) {
            $scope.firstNumber = C;
            $scope.firstPercent = $scope.firstPercent + 5;
        } 
    };

    $scope.decrease = function(id) {

        var A = parseInt(id);
        var B = A * 5/100;    
        var C = 0;

        var C = A - B;

        if (id === $scope.firstNumber) {
            $scope.firstNumber = C;
            $scope.firstPercent = $scope.firstPercent - 5;
        } 
    };

I can't see anything wrong with my maths, my thinking is that perhaps I'm approaching angular in the wrong way. However I'm not sure.

I have put together a fiddle that shows the full code.

jsFiddle

Answer 1

I have updated the fiddle to use parseFloat. Seems like the numbers are incrementing now.

var A = parseFloat(id);

http://jsfiddle.net/kjDx7/1/

The reason why it was working with values above 20 was that it was just reading the part before decimals each time it tried to increase. So 20 became 21 and 22.05 and so on. As long the the value before decimal kept changing, it showed different (but incorrect) answers.

On the other hand, 10 became 10.5 which when parsed yielded 10. As you can see, this cycle continued endlessly.

Answer 2

The reason why you face the issue is because 5% of anything less than or equal to 20 is less than or equal to 1.

When you parseInt() the value, you always end up with the same number again.

Take 15 for example.

5% of 15 = 15.75

After parseInt(), you get the value 15 again.

You use the same value to increment / decrement each time.

Hence for values below 20, you don't get any changes.

As @Akash suggests, use parseFloat() instead - or why even do that when the value that you get is float anyway

Answer 3

I made a fork of your fiddle. I'm not completely sure what you want to achive.

Take a look at this fiddle.

 $scope.increase = function() {

    $scope.firstPercent = $scope.firstPercent + 5;

    var A = $scope.firstNumber;
    var B = (A / 100) * $scope.firstPercent;
    var C = A + B;

    $scope.firstNumberWithPercent = C;
};

update

After posting, i see that question is already answered. But is this what you really want? When you hit increase, it takes 5 % off of the number in the input field. That is ok, but when you hit decrease after that, it takes 5 % off the number in the same field. So your starting point is different.

100 + 5/100 = 105
105 - 5/105 = 99,75