我是Javascript的新手，我正在学习一门课程，我必须编写一个计算最高经济适用住房费用的脚本。我被卡住了，因为计算一直在返回NaN。再次，这是非常基本的脚本，我只是想学习并弄清楚我做错了什么，所以请不要过分批评。一旦我弄清楚这一部分，我计划添加CSS /样式。这是代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Affordable House Payment</title>
<script type="text/javascript">
function doWork()
{
var income = +document.getElementById("monthly_income") + document.getElementById("alimony_income") + document.getElementById("interest_income");
var expenses = +document.getElementById("credit_card") + document.getElementById("car_payments") + document.getElementById("other_paments");
x = .29 * incom;
y = .39 * income;
z = y - expenses;
if (z < x)
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
}
else if (x < z)
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + x + " per month. This number was calculated by taking 29% of your Gross Income.";
}
else
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
}
return false;
}
</script>
</head>
<body>
<h1>Maximum Affordable House Payment</h1>
<p>To calculate your maximum affordable house payment, input your information below and click Submit:</p>
<form id="afford" onsubmit="return doWork()">
<fieldset form="afford">
<legend>Income</legend>
<label for="monthly_income">Monthly Income</label>
<input type="number" id="monthly_income" />
<label for="alimony_income">Alimony Income</label>
<input type="number" id="alimony_income" />
<label for="interest_income">Interest/Dividend Income</label>
<input type="number" id="interest_income" />
</fieldset>
<br />
<fieldset form="afford">
<legend>Expenses</legend>
<label for="credit_card">Credit Card Payments</label>
<input type="number" id="credit_card" />
<label for="car_payments">Car Payments</label>
<input type="number" id="car_payments" />
<label for="other_payments">Other Recurring Payments</label>
<input type="number" id="other_payments" />
</fieldset>
<input id="submit" type="submit" value="Submit" />
</form>
<p id="result"></p>
</body>
</html>
编辑： @Ted这是我修改过的脚本。现在计算没有显示，所以很难说是否输出数字。
<script type="text/javascript">
function doWork()
{
var income = parseFloat(document.getElementById("monthly_income").value) + parseFloat(document.getElementById("alimony_income").value) + parseFloat(document.getElementById("interest_income").value);
var expenses = parseFloat(document.getElementById("credit_card").value) + parseFloat(document.getElementById("car_payments").value) + parseFloat(document.getElementById("other_paments").value);
x = .29 * income;
y = .39 * income;
z = y - expenses;
if (z < x)
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
}
else if (x < z)
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + x + " per month. This number was calculated by taking 29% of your Gross Income.";
}
else
{
document.getElementById("result").innerHTML = "Your maximum affordable house payment is " + z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
}
return false;
}
</script>
答案 0 :(得分：1)
在您的代码中：
function doWork()
{
var income = +document.getElementById("monthly_income") + document.getElementById("alimony_income") + document.getElementById("interest_income");
获取对表单的引用并通过表单的命名属性访问控件要简单得多。可以从侦听器传递引用。此外，您将获得对控件的引用，您想要的是值，例如
<form onsubmit="return doWork(this);" ...>
功能：
function doWork(form) {
var income = +form.monthly_income.value + +form.alimony_income.value +
+form.interest_income.value;
var expenses = +form.credit_card.value + +form.car_payments.value +
+form.other_paments.value;
你还应该使用var：
保持变量本地 var x = .29 * income;
var y = .39 * income;
var z = y - expenses;
并保留对输出元素的引用，而不是所有键入的内容：
var outputElement = document.getElementById("result");
if (z < x) {
outputElement.innerHTML = ...
} else if (...) {
...
不要给任何表单控件提供名称或ID＆＃34;提交＆＃34;因为它会掩盖表单的提交方法，因此无法调用它。提交按钮可以只是一个调用该函数的普通按钮，不需要提交表单，其值应该是＆＃34;计算＆＃34;。
代码中也有一些拼写错误，这里有一些清理。它仍然需要工作。
<script>
function doWork(form) {
var income = +form.monthly_income.value + +form.alimony_income.value +
+form.interest_income.value;
var expenses = +form.credit_card.value + +form.car_payments.value +
+form.other_payments.value;
var x = .29 * income;
var y = .39 * income;
var z = y - expenses;
var outputElement = document.getElementById("result");
if (z < x) {
outputElement.innerHTML = "Your maximum affordable house payment is " +
z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
} else if (x < z) {
outputElement.innerHTML = "Your maximum affordable house payment is " +
x + " per month. This number was calculated by taking 29% of your Gross Income.";
} else {
outputElement.innerHTML = "Your maximum affordable house payment is " +
z + " per month. This number was calculated by taking 39% of your Gross Income, less Expenses.";
}
return false;
}
</script>
<h1>Maximum Affordable House Payment</h1>
<p>To calculate your maximum affordable house payment, input your information below and click Submit:</p>
<form id="afford" onsubmit="return doWork(this);">
<fieldset form="afford">
<legend>Income</legend>
<label for="monthly_income">Monthly Income
<input type="number" name="monthly_income"></label>
<label for="alimony_income">Alimony Income
<input type="number" name="alimony_income"></label>
<label for="interest_income">Interest/Dividend Income
<input type="number" name="interest_income"></label>
</fieldset>
<br>
<fieldset form="afford">
<legend>Expenses</legend>
<label for="credit_card">Credit Card Payments
<input type="number" name="credit_card"></label>
<label for="car_payments">Car Payments
<input type="number" name="car_payments"></label>
<label for="other_payments">Other Recurring Payments
<input type="number" name="other_payments"></label>
</fieldset>
<input type="submit" value="Calculate">
</form>
<p id="result"></p>
答案 1 :(得分：0)
你不能只添加DOM元素;您需要添加元素中当前的值。此外，您想要添加整数，而不是连接字符串，因此您确实需要：
parseFloat(document.getElementById("monthly_income").value)
等。而不是
+document.getElementById("monthly_income")