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

如何解决无法访问事件处理程序方法中的全局变量javascript

我想知道为什么我无法访问从该函数声明的事件处理程序方法中的 (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);
  }

解决方法

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

,

因为在将侦听器添加到按钮时 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 />