Q289 How can I calculate subtotals, tax and totals on prices of products without producing rounding errors?

irt.org | Knowledge Base | JavaScript | Number | Q289 [ previous next ]

Q289 How can I calculate subtotals, tax and totals on prices of products without producing rounding errors?

Try something like this:

<script language="JavaScript"><!--
function cent(amount) {
// returns the amount in the .99 format
    return (amount == Math.floor(amount)) ? amount + '.00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}

function update(form) {
    var subtotal = (form.quantity.value - 0) * (form.unitcost.value - 0);
    subtotal = Math.floor(subtotal * 100)/100;
    form.subtotal.value = '$' + cent(subtotal);

    var tax = subtotal / 100 * (form.rate.value - 0);
    tax = Math.floor(tax * 100)/100;
    form.tax.value = '$' + cent(tax);

    total = subtotal + tax;
    total = Math.floor(total * 100)/100;
    form.total.value = '$' + cent(total);
}
//--></script>

<form>
<table>
<tr><td>Quantity: </td><td><input type="text" name="quantity" size="8"></td></tr>
<tr><td>Unit Cost: </td><td><input type="text" name="unitcost" value="19.99"size="8"></td></tr>
<tr><td>Tax Rate (%): </td><td><input type="text" name="rate" value="7.5"size="8"></td></tr>
<tr><td>Subtotal: </td><td><input type="text" name="subtotal"size="8"></td></tr>
<tr><td>Tax: </td><td><input type="text" name="tax"size="8"></td></tr>
<tr><td>Total: </td><td><input type="text" name="total"size="8"></td></tr>
<tr><td> </td><td><input type="button" onClick="update(this.form)" value="Click Me"></td></tr>
</table>
</form>

This does not always work perfectly, for example if you enter a quantity of one and press click me then the answer given is 19.98 when it should be 19.99. the following includes a subtle change (to multiply and divide by 1000 instead of 100 - the bug goes away):

<script language="JavaScript"><!--
function cent(amount) {
// returns the amount in the .99 format
    return (amount == Math.floor(amount)) ? amount + '.00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}

function update(form) {
    var subtotal = (form.quantity.value - 0) * (form.unitcost.value - 0);
    subtotal = Math.floor(subtotal * 1000)/1000;
    form.subtotal.value = '$' + cent(subtotal);

    var tax = subtotal / 100 * (form.rate.value - 0);
    tax = Math.floor(tax * 1000)/1000;
    form.tax.value = '$' + cent(tax);

    total = subtotal + tax;
    total = Math.floor(total * 1000)/1000;
    form.total.value = '$' + cent(total);
}
//--></script>

<form>
<table>
<tr><td>Quantity: </td><td><input type="text" name="quantity" size="8"></td></tr>
<tr><td>Unit Cost: </td><td><input type="text" name="unitcost" value="19.99"size="8"></td></tr>
<tr><td>Tax Rate (%): </td><td><input type="text" name="rate" value="7.5"size="8"></td></tr>
<tr><td>Subtotal: </td><td><input type="text" name="subtotal"size="8"></td></tr>
<tr><td>Tax: </td><td><input type="text" name="tax"size="8"></td></tr>
<tr><td>Total: </td><td><input type="text" name="total"size="8"></td></tr>
<tr><td> </td><td><input type="button" onClick="update(this.form)" value="Click Me"></td></tr>
</table>
</form>

Feedback on 'Q289 How can I calculate subtotals, tax and totals on prices of products without producing rounding errors?'

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 6th July 2009. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.