按下提交按鈕時Javascript表單不返回結果

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給input#payment元素的 value 屬性。

所以恢復最后一行的分配

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

應該成為

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

此外，您還多次執行該功能。

1. 表單的onsubmit執行函數
2. 提交按鈕的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 的值分配給元素來更新函數的最后兩行。 這將工作:)