www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Javascript Calculation

  1. #1
    Join Date
    Jul 2008
    Posts
    8

    resolved [RESOLVED] Javascript Calculation

    hi all,
    I am trying to do a simple form calculation using javascript.
    I have a form with three fields, I want the forms third field to update as the users completes the first two fields, which it currently does. The problem I am having is that it shows Nan and infinity when entering numbers. I would like it to display '0' until both values are entered and the loan required is < Valuation. Then i would like the calc to round up with no decimals.

    Please can somebody take a look

    Thanks in advance people

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function startCalc(){
      interval = setInterval("calc()",1);
    }
    function calc(){
      one = document.autoSumForm.firstBox.value;
      two = document.autoSumForm.secondBox.value; 
      document.autoSumForm.thirdBox.value = ((one * 1) / (two * 1) * 100);
        }
    function stopCalc(){
      clearInterval(interval);
    }
    </script>
    </head>
    
    <body>
    
    <div style="width: 200px; text-align: center;">
    <form name="autoSumForm">
      
    <input class="right" type=text name="firstBox" id="Loan_Required" value="0" onFocus="startCalc();" onBlur="stopCalc();"><br>
    / <input class="right" type=text name="secondBox" id="Valuation" value="0" onFocus="startCalc();" onBlur="stopCalc();"><br>
    % <input class="right" type=text name="thirdBox" id="LTV">
    </form>
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    if(Number(one) && Number(two)){
      document.autoSumForm.thirdBox.value =Math.ceil((one * 1) / (two * 1) * 100);
      }
    else {
      document.autoSumForm.thirdBox.value = 0;
      }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jul 2008
    Posts
    8
    RESOLVED

    Fang,

    Thats awesome, an answer (that solves my problem) in less than one hour. Thanks again mate

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    I'd like to post an alternate solution that might give a more clear work flow for dealing with strings and numbers in JavaScript:
    Code:
    function calc() {
      var one = Number( document.autoSumForm.firstBox.value );
      var two = Number( document.autoSumForm.secondBox.value );
      var total = 0;
      
      if ( !isNaN(one) && !isNaN(two) ) {
        total = one / two * 100;
      }
      
      document.autoSumForm.thirdBox.value = total;
    }
    If the string given to the Number function is not numeric, a NaN value (Not A Number) is returned. You can explicitly test for NaN values using the isNaN() function (is Not a Number). I generally like to convert the strings to numbers using the Number function, test the resulting numbers using isNaN() and continue processing or notify the user if errors have occurred.

    I like this method best because when it comes to calculating numbers, the code to do this knows it is dealing with numbers and makes the equation easier to write and read. You don't have to multiple the strings by 1 to convert them to a number, as the strings have already been converted to numbers and tested to make sure they are valid numbers.

  5. #5
    Join Date
    Jul 2008
    Posts
    8
    toicontien,

    Thanks for that alternative thats very tidy coding.
    I assume you would modify the line

    total = one / two * 100;
    to
    total = Math.ceil(one / two * 100);

    to round the number with no decimals?

    really grateful for the advice

    Ad

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Quote Originally Posted by adamb
    toicontien,

    Thanks for that alternative thats very tidy coding.
    I assume you would modify the line

    total = one / two * 100;
    to
    total = Math.ceil(one / two * 100);

    to round the number with no decimals?

    really grateful for the advice

    Ad
    Correct. Sorry, I missed that bit.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    You still might want to check to see if the value of the variable 'two'
    is NOT equal to zero (user input). The NaN function might catch a null or ''
    but probably would pass along a '0' entry which would give divide problems.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Good catch, JMRKER. The function would then be:
    Code:
    function calc() {
      var one = Number( document.autoSumForm.firstBox.value );
      var two = Number( document.autoSumForm.secondBox.value );
      var total = 0;
      
      if ( !isNaN(one) && !isNaN(two) && two != 0 ) {
        total = one / two * 100;
      }
      
      document.autoSumForm.thirdBox.value = total;
    }
    I always forget about preventing divisions by zero.

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