如何在我的 javascript 抵押贷款计算器中包含错误？

Question

我试图让我的计算器在 APR 超过 25% 或小于 0 时抛出错误。 Loan Term 必须 > 0 且小于或等于 40，否则会显示错误消息。我尝试了很多方法，但无法弄清楚。

APR (Annual Percentage Rate )——文本输入字段。为该字段指定名称和 id apr。必须允许 0 到 25.00% 之间的浮点值。 贷款期限（年）——文本输入字段。为该字段指定名称和 ID 术语。必须 > 零且小于或等于 40。 贷款金额—（以美元为单位）文本输入字段。为该字段指定名称和 id 数量。

   <div>
<form action="">
<label> APR%: </label><br>
  <label><input type="number" id="apr" name="APR" placeholder ="Annual Percentage Rate...."/></label><br>
  <label> Loan Term: </label><br>
  <label>  <input type="number" id="term" name="APR"placeholder ="Loan Term...."/></label><br>
  <label> Loan Amount: </label><br>
  <label> <input type="number" id="amount" name="amount" placeholder ="Loan Amount...."/></label><br>
  <label> Monthly Payment: </label><br>
  <input type="text" id="payment" name="mPmt" placeholder ="Display Monthly Payment"/><br>
  <input type="button" onclick = "errors()" id="sbt" value="Submit" />
  <input type="reset" id="rst" value="Reset Form" />
</form>
</div>

<script>
var term;
var apr;
var amount;
var mPmt;


window.onload = function()
{
  document.getElementById("apr").focus();
  document.getElementById("sbt").onclick = getValues;
};

//use toFixed(2) to set the precision of the mPayment. Use it on an int.
function getValues()
{
  term = document.getElementById("term").value;
  apr = document.getElementById("apr").value;
  amount = document.getElementById("amount").value;
  apr /=1200;
  term *= 12;
  mPmt = calculatePayment();
  document.getElementById("payment").value = "$" + mPmt.toFixed(2);
};
function calculatePayment()
{
    var payment = amount*(apr * Math.pow((1 + apr), term))/(Math.pow((1 + apr), term) - 1);
    return payment;``
    }
function errors() {
var message , x;
message = document.getElementById("01");
message.innerHTML ="";
x = document.getElementById("apr").value;
try{
if (x == "") throw "empty";
if (isNaN(apr)) throw "not a number";
x = Number(x);
if (apr < 0) throw "should be a postive integer";
if (apr > 25) throw "apr can only be up to 25.00% but not less than 0";
}

catch(err) {
message.innerHTML = "Input is " + err
}

}

</script>

Answer 1

您的代码中有一些错误：

1. 缺少应显示消息的元素
2. 本应检查错误的函数未被调用

var term;
var apr;
var amount;
var mPmt;


window.onload = function() {
  document.getElementById("apr").focus();
  // adding the event handler to form submit:
  document.getElementById("form").addEventListener("submit", submitForm)
  //document.getElementById("sbt").onclick = getValues;
};

//use toFixed(2) to set the precision of the mPayment. Use it on an int.
function getValues() {
  term = document.getElementById("term").value;
  apr = document.getElementById("apr").value;
  amount = document.getElementById("amount").value;
  apr /= 1200;
  term *= 12;
  mPmt = calculatePayment();
  document.getElementById("payment").value = "$" + mPmt.toFixed(2);
};

function calculatePayment() {
  var payment = amount * (apr * Math.pow((1 + apr), term)) / (Math.pow((1 + apr), term) - 1);
  return payment;
}

// create a function that is executed on form submission
function submitForm(e) {
  // you need to prevent the default action if you don't
  // want to send the form data to an API endpoint
  e.preventDefault()
  getValues()
  // your error checking function is called here
  errors()
}

function errors() {
  var message, x;
  // I added the element with ID 01 to the HTML - it was missing
  message = document.getElementById("01");
  message.innerHTML = "";
  x = document.getElementById("apr").value;
  try {
    if (x == "") throw "empty";
    if (isNaN(apr)) throw "not a number";
    x = Number(x);
    if (apr < 0) throw "should be a postive integer";
    if (apr > 25) throw "apr can only be up to 25.00% but not less than 0";
  } catch (err) {
    message.innerHTML = "Input is " + err
  }

}

<div>
  <form id="form">
    <label> APR%: </label><br>
    <label><input type="number" id="apr" name="APR" placeholder ="Annual Percentage Rate...."/></label><br>
    <label> Loan Term: </label><br>
    <label>  <input type="number" id="term" name="APR"placeholder ="Loan Term...."/></label><br>
    <label> Loan Amount: </label><br>
    <label> <input type="number" id="amount" name="amount" placeholder ="Loan Amount...."/></label><br>
    <label> Monthly Payment: </label><br>
    <input type="text" id="payment" name="mPmt" placeholder="Display Monthly Payment" /><br>
    <!-- change type to submit: if you click this button
    the function defined in the event listener is going to
    be executed -->
    <input type="submit" id="sbt" value="Submit" />
    <input type="reset" id="rst" value="Reset Form" />
  </form>
  <div id="01"></div>
</div>