使用JavaScript设置表单元素的值

Question

我目前正在尝试学习JavaScript，并且在一个特定的练习中，我试图从用户输入设置按钮的值，但我一直得到一个空值。 我哪里做错了？

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

我得到的错误是：

未捕获的TypeError：无法读取未定义的属性“用户名”

Answer 1

问题是，当执行<script>元素的内容时，浏览器尚未加载/呈现引用的表单。 尝试将<script>元素的内容移动到函数中并在onload事件上调用该函数。

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

Answer 2

拍摄提示时，未加载任何元素。 你应该在加载后这样做。

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

Answer 3

将脚本放在HTML元素之后，以便在执行脚本时，它实际上有一个DOM元素来设置值。 试试这段代码，它会告诉你当你试图访问它时， document.forms[0]是什么。

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

但是这样做的一个好方法是创建一个函数并调用它的BODY的onload方法。 只需用<body onload="document.forms[0].username.value = window.prompt('Enter your first name.');">替换你的BODY标签<body onload="document.forms[0].username.value = window.prompt('Enter your first name.');">看看会发生什么（当然，删除所有其他代码，你投入了同样的事情）。

Answer 4

看起来表单标签未关闭。 因此，页面中可能没有有效的表单，因此document.forms [0]未定义。

在close-body标记之前，添加一个close-form标记。

使用JavaScript设置表单元素的值

问题描述

4 个解决方案

解决方案1
4 2011-06-22 05:11:25

解决方案2
3 已采纳 2011-06-22 05:11:24

解决方案3
2 2011-06-22 05:12:07

解决方案4
0 2014-02-23 18:09:12

使用JavaScript设置表单元素的值

问题描述

4 个解决方案

解决方案1 4 2011-06-22 05:11:25

解决方案2 3 已采纳 2011-06-22 05:11:24

解决方案3 2 2011-06-22 05:12:07

解决方案4 0 2014-02-23 18:09:12

解决方案1
4 2011-06-22 05:11:25

解决方案2
3 已采纳 2011-06-22 05:11:24

解决方案3
2 2011-06-22 05:12:07

解决方案4
0 2014-02-23 18:09:12