Using JavaScript to set the value of a form element_问答_开发者

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="ale开发者_如何学Gort(FIRST_NAME);"/>
    </body>
</html>

The error I get is:

Uncaught TypeError: Cannot read property 'username' of undefined

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>

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>

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

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.