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

Question

我想知道为什么我无法访问事件处理程序方法中的 (guessNumber) 变量，该方法是从此函数中声明的...此数字来自输入字段，但 console.log returns 我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 />

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

can't access to a global variable in event handler method (javascript)

javascript

variables

global-variables

eventhandler