首頁 > 開發者 > JavaScript
標籤：pre NPU font 它的 tle form orm http 獲得
一. 錯誤的示範如下代碼所示，如果需要用javascript擷取id為username1, password1的輸入框的值，將其寫入id為username2, password2的輸入框，那麼紅線地區的代碼是不可取的
這樣看到的結果是，alert依次彈出username1, password1的輸入框的值，事實上並沒有成功的賦值
這是為什嗎？因為var username2 = document.getElementById("username2").value; 這行代碼中username2的值是一個Null 字元串，舉個例子，如果username1 = "123"， 那麼username2 = username1;就等價於""="123"，把一個字串賦值給Null 字元串，沒有意義。同理，password2 = password1；也是一個道理
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html表單作業</title> <script type="text/javascript"> function myFunc(){ var username1 = document.getElementById("username1").value; var password1 = document.getElementById("password1").value; alert("您的帳號是: " + username1); alert("您的密碼是: " + password1); var username2 = document.getElementById("username2").value; var password2 = document.getElementById("password2").value; username2 = username1; password2 = password1; } </script></head><body> <form> 使用者名稱：<input type="text" id="username1" /> <br /> 密碼：<input type="password" id="password1" /> <br /> 性別：<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女 <br /> 頭像：<input type="file" name="file" /> <br /> 住址：<select id="city" name="city"> <option>選擇</option> <option>廣東</option> <option>湖南</option> <option>江西</option> </select>省 <select> <option>選擇</option> <option>深圳</option> <option>長沙</option> <option>南昌</option> </select>市 <br /> <br /> 愛好：<input type="checkbox" value="1" />籃球 <input type="checkbox" value="2" />足球 <input type="checkbox" value="3" />看書 <br /> <br /> 備忘資訊：<textarea rows="3" cols="15">這是我的第一個網頁</textarea> <br /> <br /> <br /> <br /> <br /> 使用者名稱：<input type="text" id="username2" /> <br /> 密碼：<input type="password" id="password2" /> <br /> <input type="button" value="登入" onclick="myFunc()" /> <input type="reset" /> </form></body></html>
這段代碼的結果是：我們可以看到，我們在上方的使用者名稱框輸入123，密碼框輸入567，alert依次彈出123，567，然而，獲得的值並沒有寫入到下方的使用者名稱和密碼框中
二. 如何解決
只需改動上面紅色的四行代碼。如下所示，username2.value有兩個含義，1. 它的值是Null 字元串；2. 它表示元素對象的屬性，username2.value = username1; 就是把id為username1的輸入框的值賦值給id為username2的對象的屬性
var username2 = document.getElementById("username2");var password2 = document.getElementById("password2");username2.value = username1;password2.value = password1;
為了讓代碼更清晰，可以這樣改：
function myFunc(){ var username1 = document.getElementById("username1"); var password1 = document.getElementById("password1"); alert("您的帳號是: " + username1.value); alert("您的密碼是: " + password1.value); var username2 = document.getElementById("username2"); var password2 = document.getElementById("password2"); username2.value = username1.value; password2.value = password1.value; }
驗證結果：
javascript給輸入框賦值的一個誤區
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
