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

<!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>

解决方案 »

  1.   

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

  2.   

    <!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>
      

  3.   

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