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

Question

I wanna know why i can't access (guessNumber) variable in Event handler method which is declared out of this function... this number gets from input field but console.log returns me 0 each time

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

Because the value of guessNumber doesn't exist at the time the listener is added to the button.

Cache the element first, and then access the value when you click the button.

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 />