javascript - JavaScript匿名函数作用域变量

我是JS的初学者，现在学习DOM操作。我正在尝试创建一个事件处理程序，该事件处理程序会将输入字符串打印到控制台（例如）。

当我尝试执行此操作时，处理程序的匿名函数将无法识别该变量：

var testThis = document.querySelector('.testInput').value;

document.querySelector('button[id="first"]').addEventListener('click', function() {
    console.log(testThis); //won't pass the Input to the console
})

但是，当我在函数本身内部声明变量时，一切正常。

所以我的问题是：函数不应该访问全局范围吗？

谢谢！

最佳答案

testThis在第一行代码运行时将具有输入值。如果有人更改了输入的值，然后单击按钮，则该变量仍将具有旧值。

解决方案：将输入元素本身存储在变量中，并在事件处理程序中检索其值：

var testInput = document.querySelector('.testInput');

document.querySelector('button[id="first"]').addEventListener('click', function() {
    console.log(testInput.value);
})

<input type="text" class="testInput" />
<button id="first">Click Me</button>