                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

為什么這樣賦值不可以？

<!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="這只是一個(gè)按鈕">
<script>
?var?oTxt1=document.getElementById('txt1').value;
?var?oTxt2=document.getElementById('txt2').value;
?var?oBtn=document.getElementById('btn1');
?oBtn.onclick=function(){
?//如果說(shuō)oTxt1相當(dāng)于把txt1的值賦給了它，直接alert(oTxt1)也什么都得不到。
????????oTxt1=oTxt2;
???????????????alert(oTxt2);
?}

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

但是如果把上面的.value換到下面oTxt1.value=oTxt2.value就可以實(shí)現(xiàn)第一個(gè)框的值與第二個(gè)框相等

GlaDoss

2016-04-17

源自：JavaScript進(jìn)階篇 6-11

關(guān)注問題我要回答

1071

操作

收起

2 回答

Alexdon 回答被采納 +3 積分
2016-04-17

當(dāng)頁(yè)面加載到oTxt1、oTxt2的聲明位置時(shí)，此時(shí)此刻用戶并未有任何輸入所以txt1與txt2的值都是空的。
oTxt1與oTxt2存儲(chǔ)的是在頁(yè)面加載時(shí)刻txt1，txt2中的值，這兩個(gè)值之間的相互賦值并不能動(dòng)態(tài)地影響txt1與txt2

<script?type="text/javascript">
?var?oTxt1=document.getElementById('txt1').value;
?var?oTxt2=document.getElementById('txt2').value;
?//?此處代碼在頁(yè)面加載后立即執(zhí)行，所以oTxt1是空值
?alert(oTxt1);
?var?oBtn=document.getElementById('btn1');
?oBtn.onclick=function(){
????????alert(oTxt1);
????????//?的確，因?yàn)閛Txt1的值是在頁(yè)面加載后，用戶輸入前被賦值的所以起一定是空的
????????//?且oTxt1與oTx2之間的賦值并不會(huì)影響txt1，txt2
????????oTxt1=oTxt2;
?}
</script>

2. 【如果把上面的.value換到下面oTxt1.value=oTxt2.value就可以實(shí)現(xiàn)第一個(gè)框的值與第二個(gè)框相等】此時(shí)oTxt1指向的是dom元素txt1，oTxt2指向的是dom元素txt2

<script?type="text/javascript">
?var?oTxt1=document.getElementById('txt1');
?var?oTxt2=document.getElementById('txt2');
?//?此處代碼在頁(yè)面加載后立即執(zhí)行，此時(shí)oTxt1是DOM元素txt1，oTxt2是DOM元素txt2
?alert(oTxt1);
?var?oBtn=document.getElementById('btn1');
?oBtn.onclick=function(){
????????//此時(shí)點(diǎn)擊按鈕，如果用戶已經(jīng)輸入了，則能完成期望功能
????????//?如果用戶什么都不輸入與之前的表現(xiàn)一樣都為空白
????????alert(oTxt1.value);
????????//?此處完成將影響txt1，txt2的值
????????oTxt1.value=oTxt2.value;
?}
</script>