Javascript Round Up 2 decimal places

**waccoe** · 11-17-2011 08:04 AM

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

**Kor** · 11-17-2011 08:19 AM

use the method toFixed()

Keep in mind that this method returns a String!

**waccoe** · 11-17-2011 08:26 AM

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.

**Kor** · 11-17-2011 08:42 AM

Code:

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

**waccoe** · 11-17-2011 09:23 AM

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.

**Kor** · 11-17-2011 09:35 AM

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>
<head>
<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>
</head>
<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="text" id="f3" readonly="readonly">
<input type="button" value="Calculate" onclick="calculate()">
</form>
</body>
</html>

**waccoe** · 11-17-2011 10:59 AM

Fantastic! Worked a treat. Thank you so much for all your help.

Jord

Thread: Javascript Round Up 2 decimal places

Thread Tools

Display

Javascript Round Up 2 decimal places

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions