CODEWITHSUNDEEP
javascript
user3509006
user3509006

Reputation: 13

Javascript Function Displays NaN

I am new to Javascript and am taking a course in which I must write a script that computes a maximum affordable housing payment. I'm stuck, as the calculation keeps returning NaN. Again, this is very basic script, and I am just trying to learn and figure out what I'm doing wrong, so please don't be overcritical. I am planning to add in the CSS/styling once I get this part figured out. Here is the code:

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

EDIT: @Ted Here is my revised script. Now the calculation does not display whatsoever, so hard to say if it is outputting a number.

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

Upvotes: 1

Views: 2424

Answers (2)

RobG
RobG

Reputation: 147363

In your code:

function doWork()
{
    var income = +document.getElementById("monthly_income") + document.getElementById("alimony_income") + document.getElementById("interest_income");

It is much simpler to get a reference to the form and access the controls by named properties of the form. The reference can be passed from the listener. Also, you are getting references to the controls, what you want are the values, e.g.

<form onsubmit="return doWork(this);" ...>

And the function:

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;

You shoud also keep variables local with var:

  var x = .29 * income;
  var y = .39 * income;
  var z = y - expenses;

And keep a reference to the output element rather than all that typing:

  var outputElement = document.getElementById("result");

  if (z < x) {
    outputElement.innerHTML = ...
  } else if (...) {
    ...

Don't give any form control a name or ID of "submit" as it will mask the form's submit method so it can't be called. The submit button could just be a plain button that calls the function, no need to submit the form and its value should be something like "Calculate".

There were also a number of typos in the code, here it is cleaned up a bit. It still needs work though.

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

Upvotes: 1

Ted Hopp
Ted Hopp

Reputation: 234795

You can't just add the DOM elements; you need to add the values currently in the elements. Also, you want to add integers, not concatenate strings, so you really need:

parseFloat(document.getElementById("monthly_income").value)

etc. instead of

+document.getElementById("monthly_income")

Upvotes: 0

Related Questions