JavaScript 匿名 Function Scope 變量

Question

我是 JS 的初學者，現在正在學習 DOM 操作。 我正在嘗試創建一個事件處理程序，它將輸入字符串打印到控制台（例如）。

當我嘗試這樣做時，處理程序的匿名 function 將無法識別該變量：

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
})

但是當我在 function 本身聲明變量時，一切正常。

所以我的問題是： function 不應該訪問全局 scope 嗎？

謝謝！

Answer 1

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>