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：无法读取未定义的属性'username'

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标签，看看会发生什么（当然，删除你所做的所有其他代码）。

Answer 4

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

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

使用JavaScript设置表单元素的值

4 个答案: