calculating an equation given a certain input from a user with JavaScript-CodePudding

JavaScript newbie here. I am tasked with calculating a user's monthly payment by using a given equation. I am having trouble with getting the values from the user.

const loanAmount = document.getElementById('loan-amount');
const loanYears = document.getElementById('loan-years');
const loanRate = document.getElementById('loan-Rate');
const span = document.querySelector('span');
const form = document.getElementById("calc-form");


form.addEventListener("submit", function (e) {
    e.preventDefault();
console.log('hello')

    makeLogo();
  
  });



  function makeLogo(loanAmount, loanYears, loanRate) {
    const principle = loanAmount.value 
    const n = loanYears.value * 12;
    const i = loanRate.value / 12;


const monthylPayment = (principle* i)/1-(1  i)** -(n);

span.innerText = monthylPayment;
  }

This is what I have so far and am getting an error for the variables in the makeLogo function.

CodePudding user response：

It's a good idea to separate your inputs, calculations and rendering into separate functions. try to keep functions as simple as possible. You will need to re-evaluate your monthly cost calculator, but here is a working example which takes input, calculates and then renders into form fields.

document.getElementById("calc-form").addEventListener('submit', (e) => {
    e.preventDefault();
    var loanAmount = document.getElementById('loan-amount').value;
    console.log(loanAmount);
    var loanYears = document.getElementById('loan-years').value;
    var loanRate = document.getElementById('loan-rate').value;
    
    var monthlyPayment = makeLogo( loanAmount, loanYears, loanRate );    
    console.log(monthlyPayment);
    // the monthly has now been calculated, simply put it where you'd like
    var calculated = document.getElementById('calculated');    
    calculated.value = monthlyPayment;
    
    var totalRepayment = document.getElementById('totalRepayment');    
    totalRepayment.value = monthlyPayment * ( loanYears * 12 );
    
} );
  
function makeLogo( principle, loanYears, loanRate) {
  var n = loanYears * 12;
  var i = loanRate / 12;
  var result = ( principle * i) / 1 - ( 1   i )**-( n );
  return result;
}

<html>
<form action='submit' id ='calc-form'>
Loan Amount:<input id ='loan-amount'></input><BR/>
Loan Years:<input id='loan-years'></input><BR/>
Loan Rate:<input id='loan-rate'></input><BR/>
<input type='submit'>
</form>
<span id='span-output'>
Monthly Payment :<input id='calculated' readonly><BR/>
Total Re-Payment :<input id='totalRepayment' readonly>
</span>
</html>