Nan error in Javascript - what am I doing wrong?

Question

I'm attempted to learn Javascript (again) due to a new role at work and am struggling a little. As a learning exercise I'm trying to code a simple set of functions to get used to the simple skills and have come across a problem. Code is below, but I have a webpage I've built to capture some data and the pass into some simple interest calculations. Unfortunately I'm getting a Nan error when the values hit the functions and I don't know how to resolve it.

I've tried +document, parse(float) and capturing the innerhtml from the fields, but none of those worked so I'm a little stumped. I'm certain it's a typecasting issue but no idea how to resolve it.

I'm capturing the fields used in the calculations via:

var runCalculations = new function() {

  this.calculateTotalPayable = function() {
    this.submitInitialValues();
    this.simpleInterestCalc();
    this.monthlyCompInterestCalc();
    this.dailyCompInterestCalc();
  }

  this.submitInitialValues = function() {
    //Initial loan or investment amount
    var initialAmount = +document.getElementById("initialAmount").value;
    console.log("Initial loan amount: " + initialAmount);
    //Interest rate
    var interestRate = +document.getElementById("interestRate").value;
    console.log("Interest rate: " + interestRate);
    //Tenure of loan
    var loanTenure = +document.getElementById("loanTenure").value;
    console.log("Loan tenure: " + loanTenure);
  }

  this.simpleInterestCalc = function() {
    var simpleInterestTotal = 0;
    console.log(initialAmount + interestRate + loanTenure);
    simpleInterestTotal = initialAmount + (initialAmount * (interestRate / 100) * loanTenure);
    console.log("simple " + simpleInterestTotal);
  }

  this.monthlyCompInterestCalc = function() {
    const monthCompInterestTotal = 0;
    console.log("month " + monthCompInterestTotal);
  }

  this.dailyCompInterestCalc = function() {
    const dailyCompInterestTotal = 0;
    console.log("daily " + dailyCompInterestTotal);
  }

}


  Initial loan or investment amount

  

  Interest rate

  

  Loan tenure

user_1871033 · Answer

Your variables are defined in submitInitialValues, not in simpleInterestCalc. It will work if you move the variable declarations outside of the function. Please learn about scope in JavaScript before you continue.

The reason why it didn't simply crash with errors like 'initialAmount' is not defined is that for legacy reasons, HTML elements with IDs are exposed as global variables by default unless you define your own with the same name, so inside of simpleInterestCalc your variables were actually referencing the corresponding HTML elements themselves and not their values.

user_6261951 · Answer

Thank you to people for the pointers. I've managed to get something more usable. Any constructive feedback is welcome (mainly because I know any proper coder will look at what I've done and probably wince!)

const runCalculations = new function(){

this.calculateFinalValues = function(){

    //Initial loan or investment amount
    const calcInitialAmount = +document.getElementById("initialAmount").value;
    //Interest rate
    const calcInterestRate = +document.getElementById("interestRate").value;
    //Tenure of loan
    const calcLoanTenure = +document.getElementById("loanTenure").value;

    calcSimple(calcInitialAmount,calcInterestRate,calcLoanTenure);
    calcAnnualCompound(calcInitialAmount,calcInterestRate,calcLoanTenure);
    calcMonthlyCompound(calcInitialAmount,calcInterestRate,calcLoanTenure);
    calcDailyCompound(calcInitialAmount,calcInterestRate,calcLoanTenure);

    function calcSimple(calcInitialAmount,calcInterestRate,calcLoanTenure){
        let simpleFinalTotal = 0;
        simpleFinalTotal = calcInitialAmount + ((calcInitialAmount * (calcInterestRate/100) * calcLoanTenure));
        document.getElementById('simpleResult').innerHTML = simpleFinalTotal.toFixed(2);
        return document.getElementById('simpleResult').innerHTML;
    }

    function calcAnnualCompound(calcInitialAmount,calcInterestRate,calcLoanTenure){
        let annualFinalTotal = 0;
        annualFinalTotal = calcInitialAmount + calcCompoundInterest(calcInitialAmount,calcInterestRate,calcLoanTenure,1);
        document.getElementById('finalAnnualResult').innerHTML = annualFinalTotal.toFixed(2);
        return document.getElementById('finalAnnualResult').innerHTML;
    }

    function calcMonthlyCompound(calcInitialAmount,calcInterestRate,calcLoanTenure){
        let monthFinalTotal = 0;
        monthFinalTotal = calcInitialAmount + calcCompoundInterest(calcInitialAmount,calcInterestRate,calcLoanTenure,12);
        document.getElementById('finalMonthlyResult').innerHTML = monthFinalTotal.toFixed(2);
        return document.getElementById('finalMonthlyResult').innerHTML;            
    }

    function calcDailyCompound(calcInitialAmount,calcInterestRate,calcLoanTenure){
        let dailyFinalTotal = 0;
        dailyFinalTotal = calcInitialAmount + calcCompoundInterest(calcInitialAmount,calcInterestRate,calcLoanTenure,365);
        document.getElementById('finalDailyResult').innerHTML = dailyFinalTotal.toFixed(2);
        return document.getElementById('finalDailyResult').innerHTML;             
    }

    function calcCompoundInterest(calcInitialAmount,calcInterestRate,calcLoanTenure,compPerYear){
        compInterestTotal = calcInitialAmount*(((1+((calcInterestRate/100)/compPerYear))**(calcLoanTenure*compPerYear))-1);
        return compInterestTotal;
    }
}

}

Variable capture and return to the screen is below:


    Initial loan or investment amount

    
    
    Interest rate

    
    
    Loan tenure

    

    

    
       


Simple Interest Calculation
Final amount based on simple interest where interest is added in a single amount:

Compound Interest
Final amount where interest is compounded annually:

Final amount where interest is compounded monthly:

Final amount where interest is compounded daily:

Nan error in Javascript - what am I doing wrong?

2 Answers