Question

我正在用Javascript构建抵押贷款计算器。当按下提交按钮时，什么也没有发生。我的HTML或Javascript似乎没有错误。

function computeLoan() {
  var amount = document.getElementById('amount').value;
  var interest_rate =
    document.getElementById('interest_rate').value;
  var months = document.getElementById('months').value;
  var interest = (amount * (interest_rate * .01)) / months;
  var taxes = document.getElementById('taxes').value;
  var insurance = document.getElementById('insurance').value;
  var escrow = (taxes + insurance) / 12;
  var loanPayment = amount * interest * (Math.pow(1 + interest,
    months)) / (Math.pow(1 + interest, months) - 1);
  var monthlyPayment = loanPayment + escrow;
  monthlyPayment.toFixed(2);
  monthlyPayment = document.getElementById('payment').value;
}

<form onsubmit="return computeLoan()" method="POST" action="javascript:;">
  <table>
    <tr>
      <td class="labels">Loan Amount</td>
      <td class="textbox"><input type="text" id="amount" min="1" max="10000000" onchange="computeLoan()"></td>
    </tr>
    <tr>
      <td class="labels">Mortgage Period (months)</td>
      <td class="textbox"><input type="text" id="months" min="1" max="360" onchange="computeLoan()"></td>
    </tr>
    <tr>
      <td class="labels">Interest Rate</td>
      <td class="textbox"><input type="text" id="interest_rate" min="0" max="100" onchange="computeLoan()"></td>
    </tr>
    <tr>
      <td class="labels">Property Taxes</td>
      <td class="textbox"><input type="text" id="taxes" min="0" max="10000" onchange="computeLoan()"></td>
    </tr>
    <tr>
      <td class="labels">Homeowners Insurance</td>
      <td class="textbox"><input type="text" id="insurance" min="0" max="10000" onchange="computeLoan()"></td>
    </tr>
    <tr>
      <td class="labels">Monthly Payment</td>
      <td class="textbox"><input type="number" id="payment" name="payment"></td>
    </tr>
    <tr>
      <td class="button"><input type="submit" id="calculate" name="calculate" onclick="computeLoan()"></td>
      <td class="button"><input type="reset" name="Reset"></td>
    </tr>
  </table>
</form>

我希望“每月付款”文本框会出现，但没有任何反应。

Answer 1

在computeLoan函数中，最后一行将计算字段value（此时为空字符串）的#payment分配给您之前计算的值

您要做的是将计算出的值monthlyPayment分配给input#payment元素的value属性。

所以要在最后一行恢复分配

monthlyPayment = document.getElementById('payment').value;

应该成为

document.getElementById('payment').value = monthlyPayment;

此外，您还将多次执行该功能。

表单的onsubmit执行函数
提交按钮的onclick执行功能

考虑到表单的action，您没有提交表单，因此可以将代码减少为

function computeLoan() {
  var amount = document.getElementById('amount').value;
  var interest_rate =
    document.getElementById('interest_rate').value;
  var months = document.getElementById('months').value;
  var interest = (amount * (interest_rate * .01)) / months;
  var taxes = document.getElementById('taxes').value;
  var insurance = document.getElementById('insurance').value;
  var escrow = (taxes + insurance) / 12;
  var loanPayment = amount * interest * (Math.pow(1 + interest,
    months)) / (Math.pow(1 + interest, months) - 1);
  var monthlyPayment = loanPayment + escrow;
  monthlyPayment.toFixed(2);
  document.getElementById('payment').value = monthlyPayment;
}

<form onsubmit="return false;">
  <table>
    <tr>
      <td class="labels">Loan Amount</td>
      <td class="textbox">
        <input type="text" id="amount" min="1" max="10000000" onchange="computeLoan()">
      </td>
    </tr>
    <tr>
      <td class="labels">Mortgage Period (months)</td>
      <td class="textbox">
        <input type="text" id="months" min="1" max="360" onchange="computeLoan()">
      </td>
    </tr>
    <tr>
      <td class="labels">Interest Rate</td>
      <td class="textbox">
        <input type="text" id="interest_rate" min="0" max="100" onchange="computeLoan()">
      </td>
    </tr>
    <tr>
      <td class="labels">Property Taxes</td>
      <td class="textbox">
        <input type="text" id="taxes" min="0" max="10000" onchange="computeLoan()">
      </td>
    </tr>
    <tr>
      <td class="labels">Homeowners Insurance</td>
      <td class="textbox">
        <input type="text" id="insurance" min="0" max="10000" onchange="computeLoan()">
      </td>
    </tr>
    <tr>
      <td class="labels">Monthly Payment</td>
      <td class="textbox">
        <input type="number" id="payment" name="payment">
      </td>
    </tr>
    <tr>
      <td class="button">
        <button id="calculate" name="calculate" onclick="computeLoan()">
          Calculate
        </button>
      </td>
      <td class="button">
        <input type="reset" name="Reset">
      </td>
    </tr>
  </table>
</form>

请注意，该按钮不再是提交。并且阻止该表单仅在提交时执行默认操作。

另外，您可以使computateLoan仅在定义所有值时才计算某些内容

function computeLoan() {
  const amount = document.getElementById('amount').value;
  const interest_rate = document.getElementById('interest_rate').value;
  const months = document.getElementById('months').value;
  // This `let result = value1 || value2` is similar to the trenary operator 
  // `let result = value1 ?: value2` you might know from other labguages
  // `result` will evaluate to `value1` if that is not null or undefined, 
  // otherwise it will evaluate to `value2`
  const taxes = document.getElementById('taxes').value || 0;
  const insurance = document.getElementById('insurance').value || 0;

  if (amount && interest_rate && months) {
    let interest = (amount * (interest_rate * .01)) / months;
    let escrow = (taxes + insurance) / 12;
    let loanPayment = amount * interest * (Math.pow(1 + interest, months)) / (Math.pow(1 + interest, months) - 1);
    let monthlyPayment = (loanPayment + escrow).toFixed(2);
    document.getElementById('payment').value = monthlyPayment;
  } else {
    document.getElementById('payment').value = '';
  }
}

请参阅：https://codepen.io/anon/pen/ROENKW

Answer 2

function computeLoan() {
  // rest of the function


  var monthlyPayment = loanPayment + escrow;
  monthlyPayment = monthlyPayment.toFixed(2);
  document.getElementById('payment').value = monthlyPayment;
}

嘿，请通过为元素分配monthlyPayment的值来更新函数的最后两行。这将起作用：）

按下提交按钮时，Javascript表单未返回结果

2 个答案: