JS获取不到用户名,请问为什么?

在页面的input框中输入用户名,为什么username获取不到值?
下面这种写法,username不是一个全局变量吗?
但是把username移入到click事件中就可以获取到值。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
    <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
<style type="text/css">
    .login_form{
        height:420px;
        margin-top: 25px;
    }
    
</style>
    <script type="text/javascript">
        $(function () {

            var username = $("#username").val();

            $("#sub_btn").click(function () {
                alert(username);

            });

        });
    </script>
</head>
<body>
        <div id="login_header">
            <img class="logo_img" alt="" src="../../static/img/logo.gif" >
        </div>
        
            <div class="login_banner">
            
                <div id="l_content">
                    <span class="login_word">注册</span>
                </div>
                
                <div id="content">
                    <div class="login_form">
                        <div class="login_box">
                            <div class="tit">
                                <h1>注册尚硅谷会员</h1>
                                <span class="errorMsg"></span>
                            </div>
                            <div class="form">
                                <form action="regist_success.html">
                                    <label>用户名称:</label>
                                    <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
                                    <br />
                                    <br />
                                    <label>用户密码:</label>
                                    <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
                                    <br />
                                    <br />
                                    <label>确认密码:</label>
                                    <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                                    <br />
                                    <br />
                                    <label>电子邮件:</label>
                                    <input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
                                    <br />
                                    <br />
                                    <label>验证码:</label>
                                    <input class="itxt" type="text" style="width: 150px;" id="code"/>
                                    <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">                                    
                                    <br />
                                    <br />
                                    <input type="submit" value="注册" id="sub_btn" />
                                    
                                </form>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        <div id="bottom">
            <span>
                尚硅谷书城.Copyright &copy;2015
            </span>
        </div>
</body>
</html>

        $(function () {
            $("#sub_btn").click(function () {
            var username = $("#username").val();///////放这里
                alert(username);
            });
        });

点击再获取才能获取到


$(function () {
 
 
            $("#sub_btn").click(function () {
                var username = $("#username").val();
                alert(username);
 
            });
 
        });
            var username = $("#username").val();
 
            $("#sub_btn").click(function () {
                alert(username);
 
            });

改为

            
 
            $("#sub_btn").click(function () {
                var username = $("#username").val();
                alert(username);
 
            });

这样可以确保在点击按钮后再从输入框中获取值,并显示出来

上面几楼的回答都是将你获取dom值的代码写在了方法里面,目的是为了再点击事件的时候获取值,而你现在写的是页面渲染完就获取了,后面怎么输出都是空 ‘’