Using JavaScript to set the value of a form element
Question
I am currently trying to learn JavaScript and in a particular excercise, I am trying to set the value of a button from a user input, but I keep getting an empty value. Where did I go wrong?
<html>
<head>
<title>JavaScript Variables</title>
<script type="text/javascript">
FIRST_NAME = window.prompt("Enter your first name.");
document.forms[0].username.value = FIRST_NAME;
</script>
</head>
<body>
<form id="myForm">
<input type="button" value="Paul"
onclick="alert('Paul');"/>
<br/><br/>
<input type="button" value="John"
onclick="alert('John');"/>
<br/><br/>
<input type="button" value="George"
onclick="alert('George');"/>
<br/><br/>
<input type="button" value="Ringo"
onclick="alert('Ringo');"/>
<br/><br/>
<input type="button" id="username" name="username" value=''
onclick="alert(FIRST_NAME);"/>
</body>
</html>
The error I get is:
Uncaught TypeError: Cannot read property 'username' of undefined
4 answers
solution1
4 2011-06-22 05:11:25
The problem is that when the contents of the <script> element are executed, the browser has not yet loaded/rendered the referenced form. Try moving the contents of the <script> element into a function and calling that function on the onload event.
<html>
<head>
<title>JavaScript Variables</title>
<script type="text/javascript">
function init() {
var FIRST_NAME = window.prompt("Enter your First Name.");
document.forms[0].username.value = FIRST_NAME;
}
</script>
</head>
<body onload="init();">
<form id="myForm">
<input type="button" value="Paul"
onclick="alert('Paul');"/>
<br/><br/>
<input type="button" value="John"
onclick="alert('John');"/>
<br/><br/>
<input type="button" value="George"
onclick="alert('George');"/>
<br/><br/>
<input type="button" value="Ringo"
onclick="alert('Ringo');"/>
<br/><br/>
<input type="button" id="username" name="username" value=""
onclick="alert(this.value);"/>
</body>
</html>
solution2
3 ACCPTED 2011-06-22 05:11:24
When shot the prompt, any elements is not loaded. You should do it after loaded.
<html>
<head>
<title>JavaScript Variables</title>
<script type="text/javascript">
window.onload = function() {
FIRST_NAME = window.prompt("Enter your first name.");
document.forms[0].username.value = FIRST_NAME;
}
</script>
</head>
<body>
<form id="myForm">
<input type="button" value="Paul"
onclick="alert('Paul');"/>
<br/><br/>
<input type="button" value="John"
onclick="alert('John');"/>
<br/><br/>
<input type="button" value="George"
onclick="alert('George');"/>
<br/><br/>
<input type="button" value="Ringo"
onclick="alert('Ringo');"/>
<br/><br/>
<input type="button" id="username" name="username" value=''
onclick="alert(FIRST_NAME);"/>
</body>
</html>
solution3
2 2011-06-22 05:12:07
Place the script after the HTML element so that when the script is executed, it really has a DOM element to set value to. Try this code, it will tell you what document.forms[0] is when you are trying to access it.
<html>
<head>
<title>JavaScript Variables</title>
<script type="text/javascript">
alert(typeof document.forms[0]);
</script>
</head>
<body>
<form id="myForm">
<input type="button" value="Paul"
onclick="alert('Paul');"/>
<br/><br/>
<input type="button" value="John"
onclick="alert('John');"/>
<br/><br/>
<input type="button" value="George"
onclick="alert('George');"/>
<br/><br/>
<input type="button" value="Ringo"
onclick="alert('Ringo');"/>
<br/><br/>
<input type="button" id="username" name="username" value=''
onclick="alert(FIRST_NAME);"/>
<script type="text/javascript">
FIRST_NAME = window.prompt("Enter your first name.");
document.forms[0].username.value = FIRST_NAME;
</script>
</body>
</html>
But a good way of doing it would be to create a function and call its BODY's onload method. Just replace you BODY tag with <body onload="document.forms[0].username.value = window.prompt('Enter your first name.');"> and see what happens (of course, remove all other code that you put in to do the same).
solution4
0 2014-02-23 18:09:12
Looks like the form tag is not closed. So, maybe there is no valid form in the page and hence document.forms[0] is undefined.
Before the close-body tag, add a close-form tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.