Increasing/decreasing input by a decimal value

Question

Here's html:

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/>
        <input id="qty1" type="text" value="1" class="qty"/>
        <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>

</body>

Here's js:

$(function () {
    $('.add').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseFloat($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 0.1);
        }
    });
    $('.minus').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseFloat($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 0.1);
        }
    });
});

jsfiddle: http://jsfiddle.net/hMS6Y/30/

When i try to increase or decrease input value by 0.1 i am getting some strange values like:

1.1 is ok 1.2000000000000002 1.3000000000000003

how can i make them look: 1.1, 1.2, 1.3 and so on.

https://wiki.theory.org/YourLanguageSucks#Type_System JavaScript is *not* a programming language with high precision. You believe 0.1 plus 0.2 is 0.3? Wrong! JavaScript: `0.1+0.2 == 0.3 //false` — Derek 朕會功夫, Mar 02 '14 at 07:53
@Jack That post may answer why the OP is getting the results, but does not answer his question about how to format the values to display as intended. — Uyghur Lives Matter, Apr 12 '14 at 04:39

score 3 · Accepted Answer · answered Mar 02 '14 at 07:56

try using like this

            $(function () {
        $('.add').on('click',function(){
            var $qty=$(this).closest('p').find('.qty');
            var currentVal = parseFloat($qty.val());
            if (!isNaN(currentVal)) {
                $qty.val(parseFloat(currentVal + 0.1).toFixed(1));
            }
        });
        $('.minus').on('click',function(){
            var $qty=$(this).closest('p').find('.qty');
            var currentVal = parseFloat($qty.val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $qty.val(parseFloat(currentVal - 0.1).toFixed(1));
            }
        });
    });

toFixed(1) did the trick! – Alexander Kim Mar 02 '14 at 08:00 — Alexander Kim, Mar 02 '14 at 08:00

score 3 · Answer 2 · answered Mar 02 '14 at 08:03

You can use - .toFixed(1) to round it up to the decimal place you desire:

Here you go: Fiddle

$(function () {
$('.add').on('click',function(){
    var qty = $(this).closest('p').find('.qty');
    var currentVal = parseFloat($(qty).val());
    if (!isNaN(currentVal)) {
        $(qty).val((currentVal + 0.1).toFixed(1));
    }
});
$('.minus').on('click',function(){
    var qty=$(this).closest('p').find('.qty');
    var currentVal = parseFloat($(qty).val());
    if (!isNaN(currentVal) && currentVal > 0) {
        $(qty).val((currentVal - 0.1).toFixed(1));
    }
});
});

score 1 · Answer 3 · answered Mar 02 '14 at 07:55

1

One accepted workaround is to translate the expression to integer math, then convert back afterwards, i.e.

// add case

$qty.val((currentVal*10 + 1)/10);

// subtract case

$qty.val((currentVal*10 - 1)/10);

answered Mar 02 '14 at 07:55

joeycato

118
2
11

There is no integer type in JavaScript. – Derek 朕會功夫 Mar 02 '14 at 07:58

score 0 · Answer 4 · answered Mar 02 '14 at 07:51

It is common in Javascript to have unexpected behaviors, but this one is particulary vicious.

10000000000000000 === 10000000000000001

Javascript doesn’t have integer type but lets you think it has. parseInt and parseFloat built-in functions, the fact that “1″ is displayed as “1″ and not as “1.0″ (like many languages) contribute to the general misunderstood.

Source

You can use Javascript-bignum.

Increasing/decreasing input by a decimal value

4 Answers4