Javascript switching variable from HTML to Javascript

Question

So far my code is:

<html>
    <head>
        <title>Darek Abe Senior Project</title>
    </head>
    <body>

        Welcome to the Age Calculator!<br>
        <form name="form">
            Birth Year:<br>
            <input type="text" name="birthYear" value="">
            <br>
            Current Year:<br>
            <input type="text" name="currentYear" value=""><br><br>
            <input type="submit" value="Submit">
        </form>
        <script type="text/javascript">

            var currentYear = document.getElementById('currentYear');
            alert(currentYear);

        </script>
    </body>
</html>

All I'm trying to figure out, is why it won't alert me of the currentYear variable. Please note that I'm very new to this, so there might be some stupid mistakes in there. Also, I'm aware that the birthYear variable isn't doing anything, just trying to make sure the one works before moving on.

I'm still having a problem where the alert just says undefined, any suggestions on how to fix this? — darek abe
– darek abe, Commented Dec 9, 2014 at 22:49

MC Emperor · Accepted Answer · 2014-12-09 22:18:47Z

getElementById() — what's in the name. It selects an element by its id, but the element you are trying to select does not have an id.

Give your elements ids like this:

<input type="text" name="currentYear" id="currentYear" />
<!--                                  ^
                                      Give your input field an id -->

and then you can use the function:

var currentYear = document.getElementById('currentYear');

An id must be unique within the document.

Alternatively, you can get the element with the function getElementsByName(). Of course, in this case, the <input> tag doesn't need to have an id.

var currentYear = document.getElementsByName('currentYear')[0];
/*                         ^                                ^
         This function returns an array with         We assume that there
         all elements with that name (in this        is only one element
         case 'currentYear').                        with that name, so
                                                     we select index 0 of
                                                     the array.
*/

Oh and one more thing:
Notice that all HTML elements must either have corresponding closing tags or be self-closing. For instance, <br> is invalid, and must be replaced with <br />. Same counts for <input ... />.

Wilfredo P · Accepted Answer · 2014-12-09 22:28:55Z

1

You are selecting by Id and you dont have any Id that match, so change the name attribute to Id:

<input type="text" id="currentYear" value="">

and it will work.

Note: Id's must be unique.

LIVE DEMO

As Larz says, you could get by name like:

var currentYear= document.getElementsByName("currentYear")[0];
alert(currentYear.value);

But you need to be carefull becouse getElementsByName will return an array becase that needs [0].

edited Dec 9, 2014 at 22:28

answered Dec 9, 2014 at 22:02

Wilfredo P

4,07430 silver badges46 bronze badges

3 Comments

Larz Over a year ago

May not need to necessarily remove the name attribute... just adding the id attribute would work too

Wilfredo P Over a year ago

@Larz done, I did not explained the getElementsByName because the he refers to getElementsById. thanks :)

Larz Over a year ago

Your answer was fine the way you had it before. I was just referring to where you said "so change the name attribute to Id". You would not need to change the name attribute to make this work. Just add the id, leave the name attribute alone. Then you can still use getElementsById as you said. @Wilfredo P

Christian Landgren · Accepted Answer · 2014-12-09 22:38:58Z

0

You can access the form by name by referring to the containing form like this:

document.forms['form'].birthYear.value
document.forms['form'].currentYear.value
                ^^^^
            The name of the form

answered Dec 9, 2014 at 22:38

Christian Landgren

13.9k6 gold badges37 silver badges31 bronze badges

Collectives™ on Stack Overflow

Javascript switching variable from HTML to Javascript

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related