Add/minus number inside a input field on Click

Question

This is my Fiddle: https://jsfiddle.net/55L52yww/93/

Example 1 (integer) Works fine

Example 2 (float):

Problems with adding on second time, and on 8th ~ time
if you press on minus it jumps to 0.15, even if the value is 0.75 it will jump to 0.15 (this one I fixed, just missed a parseFloat https://jsfiddle.net/55L52yww/94/)

How can I fix example 2? Thanks for any help

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    var arrayData = $(this).data('field-qty');
    var arr = arrayData.split(';');
    for (i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    fieldName = arr[0];
    var currentVal = parseFloat($('input[name='+fieldName+']').val());
    var minimalVal = parseFloat($('input[name='+fieldName+']').attr("data-minimal_quantity"));

    if (!isNaN(currentVal) && currentVal < minimalVal) {
        $('input[name='+fieldName+']').val(minimalVal);
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",minimalVal);
    }
    else {
        $('input[name='+fieldName+']').val(currentVal + parseFloat(arr[1])).trigger('keyup');
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",currentVal + parseFloat(arr[1]));
    }

    $('#'+fieldName).change();



});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', function(e){
    e.preventDefault();
    var arrayData = $(this).data('field-qty');
    var arr = arrayData.split(';');
    for (i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    fieldName = arr[0];
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    var minimalVal = parseFloat($('input[name='+fieldName+']').attr("data-minimal_quantity"));

    if (!isNaN(currentVal) && currentVal > minimalVal){
        $('input[name='+fieldName+']').val(currentVal - parseFloat(arr[1])).trigger('keyup');
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",currentVal - parseFloat(arr[1]));
    }
    else {
        $('input[name='+fieldName+']').val(minimalVal);
        $(this).parent().parent().find(".ajax_add_to_cart_button").attr("data-minimal_quantity",minimalVal);
    }

    $('#'+fieldName).change();

});

score 4 · Answer 1 · answered Oct 13 '17 at 20:54

4

In the second event handler, you still use parseInt to get currentValue:

var currentVal = parseInt($('input[name='+fieldName+']').val());

So that needs to be:

var currentVal = parseFloat($('input[name='+fieldName+']').val());

answered Oct 13 '17 at 20:54

trincot

317,000
35
244
286

yes, https://jsfiddle.net/55L52yww/94/ I noticed this, at same time you did :). Thanks anyway – AndrewS Oct 13 '17 at 20:55
What about Example 2 (float): Problems with adding on second time, and on 8th ~ time? it makes numer like 2.3999999999999995 instead of 2.4 – AndrewS Oct 13 '17 at 20:55
That is typical for floating point calculations. 0.15 cannot be represented exactly in floating point representation, so after a few additions it starts to show. You could perform a round up to two decimals or something to work around that. – trincot Oct 13 '17 at 21:06
toFixed returns a string. Make sure to only use it for printing, not for changing the variable content. See also [this Q&A](https://stackoverflow.com/questions/23500772/math-inaccuracy-in-javascript-safe-to-use-js-for-important-stuff). – trincot Oct 13 '17 at 21:10
So in my case this should be: var currentVal = parseFloat(Math.round($('input[name='+fieldName+']').val())); – AndrewS Oct 13 '17 at 21:16
No, that will round to an integer. Don't round. Wherever you assign the value to the `input` element do the `toFixed`: `$('input[name='+fieldName+']').val(minimalVal.toFixed(2));`. But really this is a different question we are discussing here, which has been dealt with before. – trincot Oct 13 '17 at 21:37
In my question was 2 parts. And I cannot solve the second part. I guess I will make a new question! – AndrewS Oct 13 '17 at 21:45
If you still have a question about floating point accuracy, I would not do that, because the topic has been covered widely on SO already. See the link I provided, but there are other similar questions. – trincot Oct 13 '17 at 21:52

Add/minus number inside a input field on Click

1 Answers1