Question

JavaScript的新手。我正在尝试创建一个非常基本的抵押贷款计算器，这是我的第一个小型JavaScript项目。这个想法是显示抵押贷款的每月费用。

我现在没有任何错误。 console.log显示正确的答案，但我希望它显示在“提交”按钮旁边的框中。我无法在该框中找到显示计算结果的方法。我搜寻了互联网，并为如何做到而绞尽脑汁。非常感谢您的帮助。

这是我的代码：

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);
}

非常感谢。

Answer 1

您不需要使用输入来获得结果。如果您将输入用于结果-用户可以编辑该字段

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>

Answer 2

我很无聊，并且使用annuity formula来计算另一个利率（如果也必须考虑利息的话）：

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>

用HTML显示JS计算的结果

2 个答案: