Javascript math show decimal places

Question

Hi.. I almost have this working however the script is rounding my numbers while I wish to keep both decimals places for a full price instead of being automatically rounded up. My sandbox for this script is here:

http://www.zacharydesigns.com/sandbox/calculatorJS2.html

and here is the code:

    <script type="text/javascript">

function update1() {
  var a = +document.forms['calc'].elements['productOne'].value,
      b = +document.forms['calc'].elements['productTwo'].value,
      c = +document.forms['calc'].elements['productThree'].value,
      productTotal = Math.floor(a/(a+b+c)*399.99);

  document.forms['calc'].elements['productTotal1'].value = productTotal;

  return false;
} 

function update2() {
  var a = +document.forms['calc'].elements['productOne'].value,
      b = +document.forms['calc'].elements['productTwo'].value,
      c = +document.forms['calc'].elements['productThree'].value,
      productTotal = Math.floor(b/(a+b+c)*399.99);

  document.forms['calc'].elements['productTotal2'].value = productTotal;

  return false;
} 

function update3() {
  var a = +document.forms['calc'].elements['productOne'].value,
      b = +document.forms['calc'].elements['productTwo'].value,
      c = +document.forms['calc'].elements['productThree'].value,
      productTotal = Math.floor(c/(a+b+c)*399.99);

  document.forms['calc'].elements['productTotal3'].value = productTotal;

  return false;
} 
</script> 

<form name="calc" action="#">

<table align="center"
border="1"><tr><td align="right">Boots: </td>
<td align="left"><input type="text" name="productOne" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update1();" /> </td>
<td align="right">Product Total:</td><td align="left">

<input type="text" name="productTotal1" size="6"
readonly="readonly" /></td>
</tr>
<tr>
<td align="right">Bindings: </td>
<td align="left"><input type="text" name="productTwo" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update2();" /> </td>
<td align="right">Product Total:</td><td align="left">

<input type="text" name="productTotal2" size="6"
readonly="readonly" /></td>
</tr><tr>
<td align="right">Boards: </td>
<td align="left"><input type="text" name="productThree" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update3();" /> </td>
<td align="right">Product Total:</td><td align="left">

<input type="text" name="productTotal3" size="6"
readonly="readonly" /></td>
</tr><tr></tr>

</tr>
</table></form>

Can someone please tell me how I can have math operated on the full number without rounding it?

Answer 1

I think that the issue is that you are using the floor operator. The floor operator always rounds down to the nearest integer so:

floor(3.5) == 3
floor(5.9999999999999999999999999999) = 5
floor(5) = 5

And I think you get the drift. That you want to do is format the decimal places and the toFixed() function is for that.

So basically, change these lines:

productTotal = Math.floor(c/(a+b+c)*399.99);

To:

productTotal = (c/(a+b+c)*399.99).toFixed(2);

And I think that will be what you want.

Answer 2

This has already been asked and answered

http://stackoverflow.com/questions/1162711/how-can-i-format-the-text-entered-into-an-html-textfield-like-currency/1162748#1162748