Round up the values in my calculator script & add commas separator for the value

Question

I have the problem. My JS knowledge & experience is very poor so I can't solve it without your help. I have the following code for my simple calculator and I want to add some code for this:

If I enter a number such as 10010 into the calculator, I get $7.508 back. How can I make it so that there are always 2 digits past the period and round it up? In this case, it would be best if it showed $7.51 instead of $7.508. If I entered 4,000 it shows "$3" but can it say "$3.00"? Thank you in advance!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" />
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p>

<script type="text/javascript">function priceCalculation(a){
    if(a <= 10000){
        return 0.00099;
    }else if(a >= 10001 && a <= 25000 ){
        return 0.00095;
    }else if(a >= 25001 && a <= 50000 ){
        return 0.00089;
    }else if(a >= 50001 && a <= 100000 ){
        return 0.00075;
    }else{
        return 0.00075;
    }
}

// number format set to en-US e.g (from 1500 to 1,500)
var numFormat = new Intl.NumberFormat("en-US");

$('#likecount').keyup(function(e){
    // if a '.' is pressed
 if($(this).val().endsWith('.')) {
     return;
    }

    // if input value is empty then assign '0' else the original value
    var inputVal = $(this).val() === ''?'0':$(this).val();
  
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, ''));
    var price = priceCalculation($(this).val());
    var total = inputVal * price;
    var formatted = numFormat.format(inputVal) // set format to input
    $(this).val(formatted); // display the formatted input back
    $('#output').text(numFormat.format(total)); // display the total price
});

</script>

Possible duplicate of [Format number to always show 2 decimal places](http://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places) — Keno, Nov 10 '16 at 06:19

Abk · Accepted Answer · 2016-11-10T07:12:06.860

You can make total to be 2 decimal places by adding total.toFixed(2). I have added it for you.

var total = (inputVal * price).toFixed(2); Read more about .toFixed at MDN

Check it out in the DEMO below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" />
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p>

<script type="text/javascript">function priceCalculation(a){
    if(a <= 10000){
        return 0.00099;
    }else if(a >= 10001 && a <= 25000 ){
        return 0.00095;
    }else if(a >= 25001 && a <= 50000 ){
        return 0.00089;
    }else if(a >= 50001 && a <= 100000 ){
        return 0.00075;
    }else{
        return 0.00075;
    }
}

// number format set to en-US e.g (from 1500 to 1,500)
var numFormat = new Intl.NumberFormat("en-US");

$('#likecount').keyup(function(e){
    // if a '.' is pressed
 if($(this).val().endsWith('.')) {
     return;
    }

    // if input value is empty then assign '0' else the original value
    var inputVal = $(this).val() === ''?'0':$(this).val();
  
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, ''));
    var price = priceCalculation($(this).val());
    var total = (inputVal * price);
    total = (Math.round(total * 100) / 100).toFixed(2);
    var formatted = numFormat.format(inputVal) // set format to input
    $(this).val(formatted); // display the formatted input back
    $('#output').text((total)); // display the total price
});

</script>

It works great for me! The rounding up part is absolutely perfect. Could you, please, help me with my second issue in this post? If I entered 4,000 it shows "$3" but can it say "$3.00"? — Morgari, Nov 10 '16 at 06:37
According to your `priceCalculation` function, `4000` becomes `0.00099`, and `total` becomes `0.00099 * 4000 = 3.96`. — Abk, Nov 10 '16 at 06:48
Ok but If I entered 40,000 it shows "$30" but how can it say "$30.00" ? Thank you in advance — Morgari, Nov 10 '16 at 06:51
Try the demo again, I have modified it. I added this `total = (Math.round(total * 100) / 100).toFixed(2);` — Abk, Nov 10 '16 at 07:14
It works great, my friend! Thank you so much for your help and solution! — Morgari, Nov 10 '16 at 07:18

score 1 · Answer 2 · answered Nov 10 '16 at 06:20

Intl.NumberFormat accepts an options parameter that allows you to influence style.

From your example, it seems like you could use:

var numFormat = new Intl.NumberFormat("en-US", { style: 'currency', currency: 'USD' });

Note that this will also add the currency symbol (such as here, a dollar sign). If you really just want to control the rounding, you may set minimumFractionDigits and maximumFractionDigits instead:

var numFormat = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 });

Vikrant · Answer 3 · 2016-11-10T07:20:33.330

Important line :

    var total = (inputVal * price).toFixed(2);

Working Demo

Try below code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input placeholder="How many likes?" style="height: 50px;width: 360px;color: #222;border-radius: 5px;border: 1px #85c9e3 solid;font-size: 18px;" type="text" id="likecount" />
<p style="font-family: 'Montserrat', sans-serif; padding: 20px 0px; font-weight: bold; color: #222; ">Pricing: <b><span style="color: #004f04;"> $</span><span id="output" style="color: #004f04;"></span></b></p>

<script type="text/javascript">function priceCalculation(a){
    if(a <= 10000){
        return 0.00099;
    }else if(a >= 10001 && a <= 25000 ){
        return 0.00095;
    }else if(a >= 25001 && a <= 50000 ){
        return 0.00089;
    }else if(a >= 50001 && a <= 100000 ){
        return 0.00075;
    }else{
        return 0.00075;
    }
}

// number format set to en-US e.g (from 1500 to 1,500)
var numFormat = new Intl.NumberFormat("en-US");

$('#likecount').keyup(function(e){
    // if a '.' is pressed
 if($(this).val().endsWith('.')) {
     return;
    }

    // if input value is empty then assign '0' else the original value
    var inputVal = $(this).val() === ''?'0':$(this).val();
  
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, ''));
    var price = priceCalculation($(this).val());
    var total = (inputVal * price);
    total = (Math.round(total * 100) / 100).toFixed(2);
    var formatted = numFormat.format(inputVal) // set format to input
    $(this).val(formatted); // display the formatted input back
    $('#output').text(total); // display the total price
});

</script>

@Morgari, as per calculation, 4000 becomes $3.96. and your code does not show $3. — Vikrant, Nov 10 '16 at 06:42
It works great for me! The rounding up part is absolutely perfect. But for the second post part If I entered 40,000 it shows "$30" but can it say "$30.00"? — Morgari, Nov 10 '16 at 07:00

Round up the values in my calculator script & add commas separator for the value

3 Answers3