Fatal编程技术网

Javascript函数显示NaN

javascript

Javascript函数显示NaN,javascript,Javascript,我是Javascript新手，正在学习一门课程，在这门课程中，我必须编写一个脚本来计算可负担住房的最高付款额。我被卡住了，因为计算结果一直在返回。再说一遍，这是一个非常基本的脚本，我只是想学习并找出我做错了什么，所以请不要过于挑剔。我计划在我弄明白这个部分后加入CSS/样式。代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Affordab

我是Javascript新手，正在学习一门课程，在这门课程中，我必须编写一个脚本来计算可负担住房的最高付款额。我被卡住了，因为计算结果一直在返回。再说一遍，这是一个非常基本的脚本，我只是想学习并找出我做错了什么，所以请不要过于挑剔。我计划在我弄明白这个部分后加入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>


经济适用房付款
函数doWork（）
{
var收入=+document.getElementById（“月收入”）+document.getElementById（“赡养费收入”）+document.getElementById（“利息收入”）；
var费用=+document.getElementById（“信用卡”）+document.getElementById（“汽车付款”）+document.getElementById（“其他付款”）；
x=.29*incom；
y=0.39*收入；
z=y-费用；
if（z
收入
月收入
赡养费收入
利息/股息收入


费用
信用卡支付
汽车付款
其他经常性付款
编辑： @泰德，这是我修改过的剧本。现在，计算不会显示任何内容，很难说它是否输出了一个数字

    <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>


函数doWork（）
{
var收入=parseFloat（document.getElementById（“每月收入”）.value）+parseFloat（document.getElementById（“赡养费收入”）.value）+parseFloat（document.getElementById（“利息收入”）.value）；
var费用=parseFloat（document.getElementById（“信用卡”）.value）+parseFloat（document.getElementById（“汽车付款”）.value）+parseFloat（document.getElementById（“其他付款”）.value）；
x=0.29*收入；
y=0.39*收入；
z=y-费用；
if（z
您不能只添加DOM元素；您需要添加元素中当前的值。此外，您希望添加整数，而不是串联字符串，因此您确实需要：

parseFloat(document.getElementById("monthly_income").value)
等等，而不是

+document.getElementById("monthly_income")
在代码中：

function doWork()
{
    var income = +document.getElementById("monthly_income") + document.getElementById("alimony_income") + document.getElementById("interest_income");
获取对表单的引用并通过表单的命名属性访问控件要简单得多。可以从侦听器传递引用。此外，您将获得对控件的引用，您需要的是值，例如

<form onsubmit="return doWork(this);" ...>
您还应该使用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 (...) {
    ...

var outputElement=document.getElementById（“结果”）；
if（z
不要给任何表单控件提供名称或ID“submit”，因为它会屏蔽表单的提交方法，因此无法调用它。submit按钮可以是调用函数的普通按钮，无需提交表单，其值应类似于“Calculate”

代码中也有一些拼写错误，在这里它被清理了一点。但是它仍然需要工作

<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>


功能定位（表格）{
var收入=+form.monthly_income.value++form.alimony_income.value+
+形式：利息、收入、价值；
var费用=+form.credit_card.value++form.car_payments.value+
+形式.其他付款.价值；
var x=0.29*收入；
风险值y=0.39*收入；
var z=y-费用；
var outputElement=document.getElementById（“结果”）；
if（z
收入
月收入
赡养费收入
利息/股息收入

<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>