[RESOLVED] Javascript Calculation

**adamb** · 07-07-2008 04:53 AM

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>

**Fang** · 07-07-2008 05:07 AM

Code:

if(Number(one) && Number(two)){
  document.autoSumForm.thirdBox.value =Math.ceil((one * 1) / (two * 1) * 100);
  }
else {
  document.autoSumForm.thirdBox.value = 0;
  }

**adamb** · 07-07-2008 05:14 AM

RESOLVED

Fang,

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

**toicontien** · 07-07-2008 09:49 AM

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.

**adamb** · 07-07-2008 10:04 AM

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

**toicontien** · 07-07-2008 02:22 PM

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.

**JMRKER** · 07-07-2008 05:33 PM

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.

**toicontien** · 07-08-2008 01:08 PM

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: [RESOLVED] Javascript Calculation

Thread Tools

Display

[RESOLVED] Javascript Calculation

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions