长度为什么为0?????

color521 2017-11-17 01:03:56

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul,li{list-style: none}
input{padding:5px;}
.login{ width: 300px;padding: 15px; position: fixed;left:50%;margin-left: -150px;top: 50% ;background: #fff; border-radius: 5px;margin-top: -100px}
.login li{ margin-top: 10px;}
.login li input{ width: 95%}
.btn{ background: #f00;border-radius: 3px; width: 100%; border: 0px;line-height: 30PX;margin-top: 10px;outline: none;color:#fff;cursor: pointer}
</style>
</head>
<body style="background-image: url(https://az29176.vo.msecnd.net/videocontent/sunset_over_sea_nimiaRF_754386_1080_HD_ZH-CN1142830609.jpg);">
<div class="login">
<ul>
<li><input id="name" type="text" placeholder="账号"></li>
<li><input class="pwd" type="password" placeholder="密码"></li>
<button type="text" class="btn" >登陆</button>
</ul>
</div>
<script>
var name=document.getElementById("name").value.length;
$(".btn").click(function(){
alert(name);
});

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

...全文

236 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

GustavoLi 2017-11-17

打赏
举报

var name=document.getElementById("name").value.length; 这句话是一进页面就执行，当时就是0，你输入之后，还会不会执行这句代码，肯定不会，所以name还是0

GustavoLi 2017-11-17

打赏
举报

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <title>Document</title> <style> *{margin: 0;padding: 0;} ul,li{list-style: none} input{padding:5px;} .login{ width: 300px;padding: 15px; position: fixed;left:50%;margin-left: -150px;top: 50% ;background: #fff; border-radius: 5px;margin-top: -100px} .login li{ margin-top: 10px;} .login li input{ width: 95%} .btn{ background: #f00;border-radius: 3px; width: 100%; border: 0px;line-height: 30PX;margin-top: 10px;outline: none;color:#fff;cursor: pointer} </style> </head> <body style="background-image: url(https://az29176.vo.msecnd.net/videocontent/sunset_over_sea_nimiaRF_754386_1080_HD_ZH-CN1142830609.jpg);"> <div class="login"> <ul> <li><input id="name" type="text" placeholder="账号"></li> <li><input class="pwd" type="password" placeholder="密码"></li> <button type="text" class="btn" >登陆</button> </ul> </div> <script> $(".btn").click(function(){ var name=document.getElementById("name").value.length; alert(name); }); </script> </body> </html>

天际的海浪 2017-11-17

打赏
举报

name变量是在页面初始时被赋值的，这时文本框的value是空的字符串""（placeholder不算文本框的实际内容），"".length当然是0。 name变量赋值的也变是0。在赋值之后name变量与文本框就没有任何关联了。name变量的值不会随文本框的输入而自动变化，永远是赋值时的值，除非重新对name变量赋值。另外，最好不要用name作全局变量的变量名，会被系统认做是window.name这个属性，window.name是窗口的名称。只能被赋值为字符串。