javascript - js輸出的值與期望不符合,實在搞不懂
迷茫
迷茫 2017-05-19 10:30:26
0
3
625
var number1 = document.getElementById("queue");
height1 = number1.value+("px");

queue是一個輸入框,number1.value是它的輸入的值(一個數字),但是height1輸出的總是px,沒有任何數字。
例如:

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是字串,那字串加字串應該可以啊

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回覆(3)
PHPzhong

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已经存在
console.log(height)//20px
</script>
</html>

3.換個方式 監控輸入框中的內容

<!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值发生改变  这个地方就会有输出  
}

</script>
</html>
曾经蜡笔没有小新

你這是打開頁面就執行 函數只執行了一次 當你再次輸入值的時候你並沒有執行那個方法 而第一次的值是空的!

仅有的幸福

你需要一個事件處理函數,頁面剛載入進來的時候,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)

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!