Thread: Javascript Round Up 2 decimal places

1. Registered User
Join Date
Nov 2011
Posts
4

Javascript Round Up 2 decimal places

Hi,

I am trying to use the following javascript (http://people.w3.org/~dsr/forms-lite/forms-lite.js) to create something similar to the example on (http://people.w3.org/~dsr/forms-lite/3/index.html) for a school project but I wondered if someone could advise me how I can round numbers to 2 decimal places in the field box as I have to convert the calculated value by an exchange rate, e.g.:

where x=100 and y=50

calculate="(x+y)/1.55"

returns a value of 96.77419355. I would like to round this figure up to 2 decimal places so it would read 96.77 but I cannot figure out how to do this.

Your help would be greatly appreciated.

Regards

John

2. use the method toFixed()

Keep in mind that this method returns a String!

3. Registered User
Join Date
Nov 2011
Posts
4
Thanks for your quick reply. Is there any way I can return the rounded figure into a field? e.g. in the example on the link above I want the rounded figure to appear in the f3 field (X+Y).

Sorry if this is very basic javascript. I am new to JS do I am still learning.

Thanks.

4. Code:
document.getElementById('f3').value=((x+y)/1.55).toFixed(2);

5. Registered User
Join Date
Nov 2011
Posts
4
Okay. Like this?

Code:
<script type="text/javascript">
document.getElementById('f3').value=((x+y)/1.55).toFixed(2);
</script>
<form name="form1" onsubmit="false">
<legend>Simple calculation</legend>
<label for="f1">X</label>
<input id="f1" name="a" datatype="number"/>
<label for="f2">Y</label>
<input id="f2" name="b" datatype="number"/>
<label for="f3">X + Y</label>
<input id="f3" name="sum" calculate="x+y" datatype="number" />
</form>
As I am new to JS I do not exactly know how to put all this together. Sorry to be a pain.

6. No. JavaScript uses methods. Methods are nested in functions. Functions are triggered by events, following the user's actions.

So, you need an action: the user clicks a button. The associated JavaScript event is onclick. That event should fire a function. All the statements, expressions, calculations, etc, should, usually, be nested inside functions:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function calculate(){
var x=Number(document.getElementById('f1').value);
var y=Number(document.getElementById('f2').value);
document.getElementById('f3').value=((x+y)/1.55).toFixed(2);
}
</script>
<body>
<form action=-"">
<legend>Simple calculation</legend>
<label for="f1">X</label>
<input type="text" id="f1">
<label for="f2">Y</label>
<input type="text" id="f2">
<label for="f3">X + Y / 1.55 = </label>
<input type="button" value="Calculate" onclick="calculate()">
</form>
</body>
</html>

7. Registered User
Join Date
Nov 2011
Posts
4
Fantastic! Worked a treat. Thank you so much for all your help.

Jord

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•