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