Issues with Javascript Equations

Hi if anyone can help me understand what's going on here it would really help me progress to the next level of development, and much appreciated.

Basically I developed a Javascript mortgage payment calculator using a formula found on Wikipedia, initially I was using var=eval.form.element.value type statements and all was working fine numerically but I then realised it didn't work in Firefox.

I discovered I was using some deprecated methods and then after reading a bit more on correct use of DOM elements and common issues I updated the script to use document.getElementbyID("etc") and this is where the bugs came out.

Suddenly the maths was knackered. I eventually figured out that when I divided all the form fields values by 1 when assigning them to variables within the statement it sorted the problem.

I am guessing that it is an issue with concatenating decimals or the two strings together etc, or something of this ilk, but can you help me understand what is happening and why dividing by one worked? Is there another method I should be applying to variables before the algebra for example?

I also seemed to remember something from high school about zero's being a problem in Algebraic equations and though this might be something to do with it too.

Here is the code I made;

WORKING VERSION;

function c_to_d(paymentcalc) {
var p= document.getElementById("mortgage_balance").value/1;
var b= document.getElementById("interest_rate").value/1;
var c= document.getElementById("term_years").value/1;
var cc= document.getElementById("term_months").value/1;
var bb=b/100;
if (cc>0) {var n=(c*12)+cc;}
else {var n=c*12}
var r=bb/12;
var d=(1+r);
var f=Math.pow(d,n);
var x=p*((r*f)/(f-1));
var j=(p*(bb/12));
var u=((n*x)/p);
var v=(x*n);
var uu=Math.round(u*100)/100;
var vv=Math.round(v*100)/100;
var xx=Math.round(x*100)/100;
var jj=Math.round(j*100)/100;
document.getElementById('capital_repayment').value =xx;
document.getElementById('interest_only').value =jj;
document.getElementById('cost_pound').value =uu;
document.getElementById('total_cost').value =vv;
;}

WHAT DIDN'T WORK;

function c_to_d(paymentcalc) {
var p= document.getElementById("mortgage_balance").value;
var b= document.getElementById("interest_rate").value;
var c= document.getElementById("term_years").value;
var cc= document.getElementById("term_months").value;
var bb=b/100;
if (cc>0) {var n=(c*12)+cc;}
else {var n=c*12}
var r=bb/12;
var d=(1+r);
var f=Math.pow(d,n);
var x=p*((r*f)/(f-1));
var j=(p*(bb/12));
var u=((n*x)/p);
var v=(x*n);
var uu=Math.round(u*100)/100;
var vv=Math.round(v*100)/100;
var xx=Math.round(x*100)/100;
var jj=Math.round(j*100)/100;
document.getElementById('capital_repayment').value =xx;
document.getElementById('interest_only').value =jj;
document.getElementById('cost_pound').value =uu;
document.getElementById('total_cost').value =vv;
;}

Many thanks people

 

Right it seems parseFloat was what I was looking for as this also works.. seems every time I post a thread on here I figure it out myself tow minutes later!

Please feel free to tell me how crap my coding knowledge is. It still works...

BUT WHY? If you can explain why this going wrong it would help. Is the computer treating it as txt strings without parsefloat and concatenating a 0?

 

Javascript uses weak typing, where it first checks the value before setting the variable type.
Other languages (C, Pascal) use strong typing, which requires the type to be declared before a value is assigned.

In the first case, the variables are strings because you are assigning text values.
In the second case, the variables are numbers because the text values are first divided by one.

You can check the type of a variable with the typeof function, like this:

function showType() {
   var x = document.getElementById('myvalue').value;
   alert(typeof(x));
}

Code (markup):

 

Yeah it started making sense to me pretty quickly after I found the ParseFloat() and ParseInt() Methods....

That's a useful trick though cheers. Its well annoying though trying to get the hang of Javscript becuase half the time when my codes don't work I have just put a semicolon in the wrong place! Cheers

 

Happens to everyone, that's why JSLint is so popular