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

Question

当APR超过25%或小于0时，我正试图让我的计算器抛出错误。贷款期限必须>0且小于或等于40，否则显示错误消息。我试了很多方法，但都想不通。

APR(年百分比率(--文本输入字段。为该字段指定名称和id apr。必须允许0到25.00%之间的浮点值。贷款期限(年(——文本输入字段。为该字段指定名称和id项。必须>0并且小于或等于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>