document.getElementById appears to return null

Question

I'm making a html document that holds two number fields.

The user enters the numeric info then clicks a button that activates a method on a separate .js file. The issue I'm running into is that every time you enter the data and press the button it returns the data as NULL.

Here is what I have:

<html>
<head>
</head>
<body>

<h1>Retirement calculation page!</h1>
<p class="a">Enter the information below to find out how much money you will have for retirement</p>

<form name="form1">
        Enter Age: <input type ="number" name="age1" min="1" max="125">
</form>
<form name="form2">
        Enter Contribution amount: <input type="number" name="cont1">
</form>
<button onclick="rFunction()">Submit</button>
<script src="retirement.js"></script>
</body>

</html>

Here is the method in the .js file.

function rFunction()
{
        var age = document.getElementById("age1");
        var cont = document.getElementById("cont1");

        document.write("Age = " + age );
        document.write("Cont = " + cont );

}

What am I doing wrong?

You use `getElementById`, but none of your elements actually have ids. — Blender, Feb 23 '14 at 00:11
possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Feb 23 '14 at 00:12
Well, one of the reasons I cover is that there is no element with such an ID in the document, which is the case here. — Felix Kling, Feb 23 '14 at 02:54

score 2 · Answer 1 · answered Feb 23 '14 at 00:13

2

You need to replace the name attribute with an Id attribute:

<form name="form1">
        Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125">
</form>
<form name="form2">
        Enter Contribution amount: <input type="number" id="cont1" name="cont1">

This will allow you to get an element by its id (getElementById).

answered Feb 23 '14 at 00:13

ltalhouarne

4,586
2
22
31

Perhaps, for this example, but `id` and `name` are different things. Omitting the `name` attribute will mean any data won't be submitted to a form handler. – Feb 23 '14 at 00:15

score 1 · Accepted Answer · answered Feb 23 '14 at 00:14

You aren't applying an ID to any field, and when you look for the value you'd find a DOM object, but you need the value. Change the HTML like this:

<form name="form1">
        Enter Age: <input type ="number" id="age1" name="age1" min="1" max="125">
        Enter Contribution amount: <input type="number" id="cont1" name="cont1">
</form>
<button onclick="rFunction()">Submit</button>

And modify your JS like this:

    var age = document.getElementById("age1").value;
    var cont = document.getElementById("cont1").value;

BTW - you don't need two form declarations.

Nice catch with the form decs. That would definitely cause issues. — random_user_name, Feb 23 '14 at 00:15

score 0 · Answer 3 · answered Feb 23 '14 at 00:14

0

You're using

name="age1"

When you should be using

id="age1"

It's called getElementById.

answered Feb 23 '14 at 00:14

Mikkel Winther

567
1
4
10

document.getElementById appears to return null

3 Answers3