为什么用var不能弹出内容？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <input type="text" class="form-control" id="music-name" >
        
        <button id="btn">点击</button>
        
        <script src="js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                var $name=$("#music-name").val();
                $("#btn").click(function(){
                    alert($name);
                })
                
            })
        </script>
    </body>
</html>

img


不能显示输入框的内容


<script>
            $(function(){
                $("#btn").click(function(){
                    alert($("#music-name").val());
                })
                
            })
        </script>

修改为这样就可以显示

img


这是为什么？

            $("#btn").click(function(){
             var $name=$("#music-name").val();
                alert($name);
            })

这样

var $name=$("#music-name").val(); 写在了click事件外面 页面加载时执行 获取的就是空字符串

alert($name); 是点击时，获取的页面加载时存储变量 所以是空

页面刚加载，你的值为空，$name本来就是空的。
程序顺序执行！
所以你点击的时候自然就是空值呀。

哈哈哈哈 原来这样 谢谢大家