html assigning value to input text using javascript does not work

Question

I am new to programming and I have a small problem

I have a form named "fr" with an input text box named "in" and a variable "n" with the value of "my text" this is my code what I have:

<html>
<head>
<script LANGUAGE="JavaScript">
var n = "my text";
document.fr.in.value = n;
</script>
</head>

<body>
<form name="fr">
<input name="in" size="3">
</form>
</body>
</html>

but somehow input "in" does not show the text "my text" I have been browsing the internet but I couldn't find any solution which works.. everything what I try does not work. I think I am doing something very simple wrong. please help me.

Community · Accepted Answer · 2017-04-13 12:33:14Z

3

document.fr does not exist yet at time of invocation; hence, everything following it doesn't exist either, so it throws a TypeError

TypeError: Cannot read property 'in' of undefined

To fix this, move your code to be invoked after the nodes exist, using your favourite method

window.addEventListener('load', function () {
    var n = "my text";
    document.fr.in.value = n;
});

I'll further note that;

The preferred way to look up an Element is to give it an id attribute and use document.getElementById. An id must be unique.
Using the language attribute of <script> is depreciated, if you want to specify the language, use the type attribute type="text/javascript" or type="application/javascript"
Opening the Console when a script is not working as expected will often show you the cause immediately. This is usually done with F12.

edited Apr 13, 2017 at 12:33

CommunityBot

11 silver badge

answered Aug 18, 2013 at 12:31

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Optimus Prime · Accepted Answer · 2013-08-18 15:20:11Z

0

You should init the script after the form is defined, as explained by Paul S. in his answer. So you may do,

<html>
<head>
</head>

<body>
<form name="fr">
<input name="in" size="3">
</form>

<script type="text/javascript">
var n = "my text";
document.forms.fr.in.value = n;
</script>
</body>
</html>

This would run the script after the form is defined. Or put this code in some function, and instantiate the function after the form is defined(i.e. loaded).

edited Aug 18, 2013 at 15:20

answered Aug 18, 2013 at 12:45

Optimus Prime

6,9475 gold badges37 silver badges65 bronze badges

1 Comment

Paul S. Over a year ago

This will still throw the same TypeError

Donatas Bacius · Accepted Answer · 2013-08-18 12:57:13Z

0

As Paul pointed out you should only try to get a hold of page elements when you are certain that the element you are interested has already been loaded. So in this case you can set the value of the input field by running your code when the page has fully loaded and by getting a reference to the input like this:

window.addEventListener("load", function () {
    var n = "my text";
    var myInput = document.getElementsByName("in");
    myInput[0].value = n;
});

Note, because getElementsByName() returns an array, you will have to use [0], to get the first element.

edited Aug 18, 2013 at 12:57

answered Aug 18, 2013 at 12:39

Donatas Bacius

6566 silver badges16 bronze badges

1 Comment

Paul S. Over a year ago

TypeError: Cannot set property 'value' of undefined

Collectives™ on Stack Overflow

html assigning value to input text using javascript does not work

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related