Morgari - 1 year ago 94
Javascript Question

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

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"?

``````<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>``````

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>``````

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download