www.webdeveloper.com
Results 1 to 7 of 7

Thread: Javascript Round Up 2 decimal places

  1. #1
    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. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    use the method toFixed()

    Keep in mind that this method returns a String!

  3. #3
    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. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    document.getElementById('f3').value=((x+y)/1.55).toFixed(2);

  5. #5
    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. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>

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

    Jord

Thread Information

Users Browsing this Thread

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
  •  
HTML5 Development Center



Recent Articles