                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么这样赋值不可以？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input id="txt1" type="text">
<input id="txt2" type="text" >
<input id="btn1" type="button" value="这只是一个按钮">
<script>
 var oTxt1=document.getElementById('txt1').value;
 var oTxt2=document.getElementById('txt2').value;
 var oBtn=document.getElementById('btn1');
 oBtn.onclick=function(){
 //如果说oTxt1相当于把txt1的值赋给了它，直接alert(oTxt1)也什么都得不到。
        oTxt1=oTxt2;
               alert(oTxt2);
 }

</script>
</body>
</html>

但是如果把上面的.value换到下面oTxt1.value=oTxt2.value就可以实现第一个框的值与第二个框相等

GlaDoss

2016-04-17

源自：JavaScript进阶篇 6-11

关注问题我要回答

971

操作

收起

2 回答

Alexdon 回答被采纳 +3 积分
2016-04-17

当页面加载到oTxt1、oTxt2的声明位置时，此时此刻用户并未有任何输入所以txt1与txt2的值都是空的。
oTxt1与oTxt2存储的是在页面加载时刻txt1，txt2中的值，这两个值之间的相互赋值并不能动态地影响txt1与txt2

<script type="text/javascript">
 var oTxt1=document.getElementById('txt1').value;
 var oTxt2=document.getElementById('txt2').value;
 // 此处代码在页面加载后立即执行，所以oTxt1是空值
 alert(oTxt1);
 var oBtn=document.getElementById('btn1');
 oBtn.onclick=function(){
        alert(oTxt1);
        // 的确，因为oTxt1的值是在页面加载后，用户输入前被赋值的所以起一定是空的
        // 且oTxt1与oTx2之间的赋值并不会影响txt1，txt2
        oTxt1=oTxt2;
 }
</script>

2. 【如果把上面的.value换到下面oTxt1.value=oTxt2.value就可以实现第一个框的值与第二个框相等】此时oTxt1指向的是dom元素txt1，oTxt2指向的是dom元素txt2

<script type="text/javascript">
 var oTxt1=document.getElementById('txt1');
 var oTxt2=document.getElementById('txt2');
 // 此处代码在页面加载后立即执行，此时oTxt1是DOM元素txt1，oTxt2是DOM元素txt2
 alert(oTxt1);
 var oBtn=document.getElementById('btn1');
 oBtn.onclick=function(){
        //此时点击按钮，如果用户已经输入了，则能完成期望功能
        // 如果用户什么都不输入与之前的表现一样都为空白
        alert(oTxt1.value);
        // 此处完成将影响txt1，txt2的值
        oTxt1.value=oTxt2.value;
 }
</script>