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

【问题标题】：can't access to a global variable in event handler method (javascript)无法访问事件处理程序方法中的全局变量（javascript）
【发布时间】：2021-07-17 11:34:01
【问题描述】：

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

【问题讨论】：

guessNumber 的值简直就是0！？为什么你会期望任何不同的价值？
您是否要更改.guess 中的值？并期望在您的处理程序中看到该值？
@TusharShahi 当我在处理函数中声明 GuessNumber 时，一切都很好。我只是不知道为什么当这个值的声明超出处理函数时不能真正工作
因为 GuessNumber 值永远不会改变。记住你的脚本只运行一次，你的处理程序运行多次。如果值是在外部定义的，它永远不会改变并保持为 0。
添加更多关于你想要达到什么目的的信息？如果有问题。因为上面的代码块没有表现出有用的功能

标签： javascript variables global-variables eventhandler

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：