Morgari Morgari - 23 days ago 11
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"?
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>




Abk Abk
Answer

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>

Comments