无法访问事件处理程序方法中的全局变量（javascript）

Question

我想知道为什么我无法访问从该函数声明的事件处理程序方法中的 (guessNumber) 变量......这个数字来自输入字段，但 console.log 每次都返回 0

 let showScore = document.querySelector('.score'); const guessNumber = Number(document.querySelector('.guess').value); const secret = Math.trunc(Math.random() * 10) + 1; let score = 20; checkBtn.addEventListener('click', () => { console.log(guessNumber); if (!guessNumber) { message.textContent = 'No Number!'; console.log(guessNumber); }

Answer 1

您可以访问此变量，因为如果不这样做，console.log 将打印“未定义”但其当前值为 0。检查 console.log 输出，在事件处理程序块之外。

Answer 2

因为在将侦听器添加到按钮时， guessNumber的值不存在。

首先缓存元素，然后在单击按钮时访问该值。

 const message = document.querySelector('div'); const checkBtn = document.querySelector('button'); const showScore = document.querySelector('.score'); const input = document.querySelector('.guess'); const secret = Math.trunc(Math.random() * 10) + 1; let score = 20; checkBtn.addEventListener('click', () => { const guessNumber = input.value; if (!guessNumber) { message.textContent = 'No Number!'; } else { console.log(guessNumber); } });

 <input class="guess" /> <button>Click</button> <div />