A misconception that JavaScript assigns values to input boxes

I. The wrong demonstration

As shown in the following code, if you need JavaScript to get the value of the input box with ID username1, Password1, write it to the input box with ID username2, PASSWORD2, then the code for the Red Line area is undesirable

The result is that alert pops up username1, password1 the value of the input box, and in fact does not have a successful assignment

Why is this? Because var username2 = document.getElementById ("UserName2"). Value; The value of username2 in this line of code is an empty string, for example, if username1 = "123", then username2 = username1; is equivalent to "" = "123", it is meaningless to assign a string to an empty string. Similarly, password2 = Password1;

<! DOCTYPE html>functionMyFunc () {var username1 = document.getElementById ("username1"). Value; var password1 = document.getElementById ("Password1"). Value; Alert ("Your account number is:" +username1); Alert ("Your password is:" +password1); var username2 = document.getElementById ("UserName2"). Value; var password2 = document.getElementById ("Password2" ). Value; username2             = username1; Password2             = Password1; }    </script>User name:<input type= "text" id= "username1"/> <br/> Password: <input type= "password" id= "Password1"/>  <br/> Sex: <input type= "Radio" name= "Sex" value= "male"/> Male <input type= "Radio" name= "Sex" value= "female"/> Female <br/> Head: <input type= "file" name= "file"/> <br/> Address : <select id= "City" name= "City" > <option> selection </option> <option> Guangdong <              /option> <option> Hunan </option> <option> Jiangxi </option>              </select> Province &nbsp;&nbsp;                  <select> <option> selection </option> <option> shenzhen </option>        <option> Changsha </option> <option> Nanchang </option> </select> City     <br/> <br/> Hobby: <input type= "checkbox" value= "1"/> Basketball         <input type= "checkbox" value= "2"/> Soccer <input type= "checkbox" value= "3"/> Reading <b        R/> <br/> Note information: <textarea rows= "3" cols= ">" This is my first page </textarea> <br/> <br/> <br/> <br/> <br/> User name: <input type= "text" id= "Usern Ame2 "/> <br/> Password: <input type=" password "id=" Password2 "/> <br/> <in        Put type= "button" value= "Login" onclick= "MyFunc ()"/>&nbsp;&nbsp; <input type= "reset"/> </form></body>
The result of this code is: we can see that we enter the user name box above 123, the Password box input 567,alert in turn 123,567, however, the obtained value is not written to the user name and password box below
two. How to resolve
Just change the red four line code above. As shown below, Username2.value has two meanings, 1. Its value is an empty string; 2. It represents the attribute of the element object,username2.value = username1; is to assign the value of the input box with ID username1 to the property of the object with ID username2
var username2 = document.getElementById ("UserName2"), var password2 = document.getElementById ("Password2"); Username2.value = Username1;password2.value = Password1;
To make the code clearer, you can change this:
function MyFunc () {            var username1 = document.getElementById ("username1");            var password1 = document.getElementById ("Password1");            Alert ("Your account number is:" + username1.value);            Alert ("Your password is:" + password1.value);                var username2 = document.getElementById ("username2");            var password2 = document.getElementById ("Password2");            Username2.value = Username1.value;            Password2.value = password1.value;            }
Validation results:
A misconception that JavaScript assigns values to input boxes