Javascript toFixed not working

Question

See my code bellow. It should add and substract 0.1 from an input. However it gets an error on the toFixed(2) function when I click on the + button. Why does this not work, when the - button do?

Here is my code in jsfiddle.

HTML:

        <div class="input-group">
            <span class="input-group-btn">
                <button type="button" class="iLiter-left-minus btn btn-lg btn-info btn-number" data-type="minus" data-field="">-
                </button>
            </span>
            <input type="number" id="iLiter" class="form-control input-number input-lg" value="0.4" min="0.1" max="10">
            <span class="input-group-btn">
                <button type="button" class="iLiter-right-plus btn btn-lg btn-info btn-number" data-type="plus" data-field="">
                    +
                </button>
            </span>
        </div>

JavaScript:

        $('.iLiter-right-plus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = quantity.toFixed(2);
            if (quantity < 10.0) {
                quantity = quantity + 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });
        $('.iLiter-left-minus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = quantity.toFixed(2);
            if (quantity > 0.1) {
                quantity = quantity - 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });

`toFixed` convert a `Number` to a `String` https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed — gurvinder372, Apr 23 '17 at 10:40
This should help http://stackoverflow.com/questions/15762768/javascript-math-round-to-two-decimal-places — gurvinder372, Apr 23 '17 at 10:41

curveball · Accepted Answer · 2017-04-23T10:48:35.907

1

try

quantity = +quantity + 0.1;

and

quantity = +quantity - 0.1; //(here + is optional)

in corresponding places in your code. It didn't work for "+" button because "+" means also string concatenation and the results of "string" + number is a string "stringnumber" and strings don't have "toFixed" method (as it is reflected in the console error message) whereas "-" operator converts string quantity into a number and everything works as expected.

edited Apr 23 '17 at 10:48

answered Apr 23 '17 at 10:43

curveball

4,320
15
39
49

Oh, I get it. I will use Martin's answer, but now it makes sense why the minus worked. Thanks! – mathkid91 Apr 23 '17 at 10:58

score 1 · Answer 2 · answered Apr 23 '17 at 10:46

1

Let's try

quantity = Number(quantity) + 0.1;

answered Apr 23 '17 at 10:46

taile

2,738
17
29

Martin Adámek · Answer 3 · 2017-04-23T11:04:24.580

You are converting the float number (you just parsed with parseFloat()) back to a string with toFixed(2). In case of + operator, you are passing it something like 0.50.1 which is not a valid numeric string (therefore the error with calling '0.50.1'.toFixed(2)).

Call .toFixed just once, before updating the HTML value (not before working with the value):

$('.iLiter-right-plus').click(function (e) {
  e.preventDefault();
  var quantity = parseFloat($('#iLiter').val());
  if (quantity < 10.0) {
    quantity = quantity + 0.1;
    quantity = quantity.toFixed(2);
    $('#iLiter').val(quantity);
  }
});
$('.iLiter-left-minus').click(function (e) {
  e.preventDefault();
  var quantity = parseFloat($('#iLiter').val());
  if (quantity > 0.1) {
    quantity = quantity - 0.1;
    quantity = quantity.toFixed(2);
    $('#iLiter').val(quantity);
  }
});

Updated fiddle here: https://jsfiddle.net/2fq6bhxs/2/

score 1 · Answer 4 · answered Apr 23 '17 at 10:50

Please change your Javascript source to like this

        $('.iLiter-right-plus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = parseFloat(quantity.toFixed(2));
            if (quantity < 10.0) {
                quantity = quantity + 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });
        $('.iLiter-left-minus').click(function (e) {
            e.preventDefault();
            var quantity = parseFloat($('#iLiter').val());
            quantity = parseFloat(quantity.toFixed(2));
            if (quantity > 0.1) {
                quantity = quantity - 0.1;
                quantity = quantity.toFixed(2);
                $('#iLiter').val(quantity);
            }
        });

When you use .toFixed => your quantity will be a string. So the next .toFixed will be not work because .toFixed only work with a number

Javascript toFixed not working

4 Answers4