Displaying the result of a JS calculation in HTML

Question

New to JavaScript. I'm trying to create an extremely basic mortgage calculator as my first small JavaScript project. The idea is to display the monthly cost of a mortgage payment.

I'm not getting any errors at the moment. The console.log is showing the correct answer, but I want it to be displayed in the box next to the submit button. I cannot find a way to display the result of the calculation in that box. I've scoured the internet and I'm racking my brains over how to do it. Any help is very much appreciated.

Here's my code:

HTML

<form action="">
  <input type="number" id="amountBorrowed" placeholder="Amount Borrowed">
  <input type="number" id="mortgageTerm" placeholder="Term in Years">
  <input type="button" id="sub" value="Submit" onclick="mortgageCalc()">
  <input type="number" id="monthlyCost" name="monthlyCost">  
</form>

JavaScript

function mortgageCalc() {
  var amountBorrowed;
  var mortgageTerm;
  var monthlyCost;
  amountBorrowed = document.getElementById("amountBorrowed").value;
  mortgageTerm = document.getElementById("mortgageTerm").value;
  mortgageTerm *= 12;      
  monthlyCost = (amountBorrowed / mortgageTerm);
   console.log(monthlyCost);
}

Thanks a lot.

`document.getElementById("monthlyCost").value = monthlyCost;` — you might want to work on your internet scouring techniques. — Pointy, Sep 10 '20 at 15:20

score 0 · Answer 1 · answered Sep 10 '20 at 15:24

You don't need use input for result. If you use input for result - user can edit that field

function mortgageCalc() {
  var amountBorrowed;
  var mortgageTerm;
  var monthlyCost;
  var result = document.getElementById('monthlyCost')
  amountBorrowed = document.getElementById("amountBorrowed").value;
  mortgageTerm = document.getElementById("mortgageTerm").value;
  mortgageTerm *= 12;      
  monthlyCost = (amountBorrowed / mortgageTerm);
   console.log(monthlyCost);
   result.innerHTML = monthlyCost
}

<form action="">
  <input type="number" id="amountBorrowed" placeholder="Amount Borrowed">
  <input type="number" id="mortgageTerm" placeholder="Term in Years">
  <input type="button" id="sub" value="Submit" onclick="mortgageCalc()">
  <!--<input type="number" id="monthlyCost" name="monthlyCost"> you don't need it-->
  <div>
    <p>Result: </p><p id="monthlyCost"> </p><!-- result will be here -->
  </div>
</form>

Carsten Massmann · Answer 2 · 2020-09-10T19:34:05.937

I was bored and played around with another version using the an annuity formula to calculate a monthly rate if interest has to be considered too:

document.querySelector('form').addEventListener('input',ev=>{
  if (ev.target.tagName==="INPUT"){
    const [amnt,yrs,intr]="amountBorrowed,mortgageTerm,yearlyinterest".split(',')
      .map(id=> +document.getElementById(id).value );
    let a,n=yrs*12;                       // number of months
    if(intr>0){
      let q=(1.+intr/100)**(1/12);        // monthly interest rate + 1
      a=amnt * q**n * (q-1)/(q**n-1);.    // annuity formula
    } else { a = amnt/n; }
    document.getElementById('monthlyCost').textContent=a.toFixed(2)
  }
})

input {width:150px}

<form action="">
  <input type="number" id="amountBorrowed" placeholder="Amount Borrowed">
  <input type="number" id="mortgageTerm" placeholder="Term in Years">
  <input type="number" id="yearlyinterest" placeholder="Yearly interest rate %">  

<div>
    <p>Result: </p><p id="monthlyCost"> </p>
  </div>
</form>

Displaying the result of a JS calculation in HTML

2 Answers2