js原生单击按钮后获取input值

单击按钮获取input值，怎么都拿不到...都快怀疑人生了...

错误代码：

   <div>名称：<input type="text" class="name" /></div>
    <button>添加</button>
    <script>
      var n = document.querySelector(".name").value;
      var btn = document.querySelector("button");
      btn.onclick = function () {
        console.log(n);
      };
    </script>

在执行单击按钮处理函数的时候，并没有拿到value值，必须写到事件里面...

正确代码

    <div>名称：<input type="text" class="name" /></div>
    <button>添加</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
        var name = document.querySelector(".name").value;
        console.log(name);
      };
    </script>