var number1 = document.getElementById("queue");
height1 = number1.value+("px");
queue是一個輸入框,number1.value是它的輸入的值(一個數(shù)字),但是height1輸出的總是px,沒有任何數(shù)字。
例如:
console.log(number1.value); //20
console.log(height1);//px
我還試了一個方法
var number1 = document.getElementById("queue");
var number1Value = number1.value;
height1 = number1Value+("px");
這下更加奇怪,
console.log(number1.value);//20
console.log(number1Value);//
console.log(number1.value.constructor == String);//true
證明number1.value
是字串,那字串加字串應(yīng)該可以啊
業(yè)精于勤,荒于嬉;行成于思,毀于隨。
1.大概你懂的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input">
</body>
<script>
var val=document.getElementById("input");
var height=val.value+"px";//你這個地方 定義height的時候 val.value并不存在
console.log(height)//px
</script>
</html>
2.正確取得的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input" value="20">
</body>
<script>
var val=document.getElementById("input");
var height=val.value+"px";//你這個地方 定義height的時候 val.value已經(jīng)存在
console.log(height)//20px
</script>
</html>
3.換個方式 監(jiān)控輸入框中的內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input" onchange="getVal()">
</body>
<script>
var val=document.getElementById("input");
function getVal() {
var height=val.value+"px";
console.log(height)//這種只要input值發(fā)生改變 這個地方就會有輸出
}
</script>
</html>
你這是打開頁面就執(zhí)行 函數(shù)只執(zhí)行了一次 當(dāng)你再次輸入值的時候你並沒有執(zhí)行那個方法 而第一次的值是空的!
你需要一個事件處理函數(shù),頁面剛載入進(jìn)來的時候,value一定是空的,因為你還沒有在input裡寫值
var height = 0;
var input = document.querySelector('#input');
var btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
var value = input.value;
height = value + 'px';
}, false)