问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js输出的值与期望不符合，实在搞不懂

头像
想做个说球的
    331513
    头像
    某熊猫桑
      16.1k61547
      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是字符串，那字符串加字符串应该可以啊

      htmljavascript
      阅读 2.4k
      3 个回答
      得票最新
      头像
      四月的桜和猫
        3.3k53055

        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>
        头像
        北区
          2007

          你这是打开页面就执行 函数只执行了一次 当你再次输入值的时候你并没有执行那个方法 而第一次的值是空的！

          头像
          differ_wy
            1464

            你需要一个事件处理函数，页面刚加载进来的时候，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)

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题