«Угадай число» JS задача игровой функции

Question

Хотя в DevKit в Chrome не было показано ни одной ошибки, моя программа, похоже, не распознает условные выражения правильно ... Проблема находится где-то в районе функции "game ()". Он не распознает, выше или ниже число. Либо это ошибка внимания, либо я просто упустил что-то важное в программировании. Должен сказать, что через пару дней я начал изучать JS, а go, поэтому я просто хочу улучшить свои навыки и попрактиковаться.

var difBlocks = document.getElementsByClassName('difficulty');
var easy = document.getElementById('easy');
var medium = document.getElementById('medium');
var hard = document.getElementById('hard');
var h2Tags = document.getElementsByTagName('h2');
var lis = document.getElementsByTagName('li');
var guessNumber = parseInt(document.getElementById('guess').value);

easy.addEventListener('click', easyGame);
medium.addEventListener('click', mediumGame);
hard.addEventListener('click', hardGame);

function easyGame() {
  for (let i = 0; i <= 2; i++) {
    difBlocks[i].style.display = 'none';
  }
  for (let j = 0; j < h2Tags.length; j++) {
    h2Tags[j].style.display = 'none';
  }
  for (let k = 0; k < lis.length; k++) {
    lis[k].style.display = 'none';
  }
  document.getElementById('guess').style.display = 'block';
  document.getElementById('guesslabel').style.display = 'inline-block';
  document.getElementById('guessrange').innerHTML = 'Between 0 and 10';
  document.getElementById('guessH3').innerHTML = 'Try and guess the number I\'ve been thinking of!';
  lives = 3;
  randomNumber = Math.floor(Math.random() * 10);
  createLives(3);
}

function mediumGame() {
  for (let i = 0; i <= 2; i++) {
    difBlocks[i].style.display = 'none';
  }
  for (let j = 0; j < h2Tags.length; j++) {
    h2Tags[j].style.display = 'none';
  }
  for (let k = 0; k < lis.length; k++) {
    lis[k].style.display = 'none';
  }
  document.getElementById('guess').style.display = 'block';
  document.getElementById('guesslabel').style.display = 'inline-block';
  document.getElementById('guessrange').innerHTML = 'Between 0 and 100';
  document.getElementById('guessH3').innerHTML = 'Try and guess the number I\'ve been thinking of!';
  lives = 5;
  randomNumber = Math.floor(Math.random() * 100);
  createLives(5);
}

function hardGame() {
  for (let i = 0; i <= 2; i++) {
    difBlocks[i].style.display = 'none';
  }
  for (let j = 0; j < h2Tags.length; j++) {
    h2Tags[j].style.display = 'none';
  }
  for (let k = 0; k < lis.length; k++) {
    lis[k].style.display = 'none';
  }
  document.getElementById('guess').style.display = 'block';
  document.getElementById('guesslabel').style.display = 'inline-block';
  document.getElementById('guessrange').innerHTML = 'Between 0 and 1000';
  document.getElementById('guessH3').innerHTML = 'Try and guess the number I\'ve been thinking of!';
  lives = 9;
  randomNumber = Math.floor(Math.random() * 1000);
  createLives(9);
}

function game() {
  if (lives > 0) {
    if (randomNumber === guessNumber) {
      alert('You won!');
    } else if (randomNumber > guessNumber) {
      alert('Go higher!');
      removeLife();
    } else if (randomNumber < guessNumber) {
      alert('Go lower!');
      removeLife();
    } else {
      alert('WTF!!!');
    }
  } else {
    alert(`You lost!\nThe number was ${randomNumber}`);
  }
}

function win() {
  alert('Congrats!\nYou won!')
}

function createLives(value) {
  for (i = 0; i < value; i++) {
    var life = document.createElement("span");
    life.className = 'dot';
    document.getElementById('lives').appendChild(life);
  }
}

function removeLife() {
  document.getElementById('lives').removeChild(document.getElementById('lives').lastChild);
  lives--;
}

body {
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
}

#ruleset {
  font-size: large;
  list-style-type: none;
  font-weight: 500;
}

label {
  margin-bottom: 0.8%;
  display: inline-block;
  position: relative;
  font-size: larger;
}

input {
  border: 2px solid black;
  display: block;
  margin: 0.2% auto;
  font-size: large;
  text-align: center;
}

.difficulty {
  line-height: 65%;
  border: 2px solid black;
  display: inline-block;
  height: auto;
  min-width: fit-content;
  width: 8.6%;
  margin: 0.8% 0.7% 1% 0.7%;
  border-radius: 15px;
}

#easy {
  background: rgb(140, 223, 28);
  background: linear-gradient(90deg, rgba(140, 223, 28, 1) 0%, rgba(68, 214, 51, 1) 50%, rgba(54, 161, 68, 1) 100%);
}

#medium {
  background: rgb(11, 151, 162);
  background: linear-gradient(90deg, rgba(11, 151, 162, 1) 0%, rgba(24, 152, 205, 1) 50%, rgba(25, 111, 189, 1) 100%);
}

#hard {
  background: rgb(83, 59, 221);
  background: linear-gradient(90deg, rgba(83, 59, 221, 1) 0%, rgba(95, 19, 149, 1) 50%, rgba(101, 23, 159, 1) 100%);
}

.difficulty:hover {
  background-color: gray;
  cursor: pointer;
  color: white;
}

#guess,
#guesslabel {
  display: none;
}

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 0.2%;
}

<link href="https://fonts.googleapis.com/css2? 
    family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<p id="nothing"> </p>
<h1> Number Guessing Game </h1>
<h2> <span> - </span> Ruleset <span> - </span> </h2>
<ul id="ruleset">
  <li> Pick a number between 0 and 10, 0 and 100 or 0 and 1000. </li>
  <li> You have 3, 5, or 9 guesses based on the chosen difficulty. </li>
  <li> If your guess if wrong, you will get indications. </li>
  <li> You win if you guess the number I've been thinking of. </li>
</ul>
<h2> Are you ready? </h2>
<h2> Pick your desired difficulty: </h2>
<div id="difficulties">
  <div class="difficulty" id="easy">
    <h3> Easy </h3>
    <p> 0 - 10 </p>
  </div>
  <div class="difficulty" id="medium">
    <h3> Medium </h3>
    <p> 0 - 100 </p>
  </div>
  <div class="difficulty" id="hard">
    <h3> Hard </h3>
    <p> 0 - 1000 </p>
  </div>
</div>
<h3 id="guessH3"> </h3>
<h3 id='guessrange'> </h3>
<div id="lives">
</div>
<label for="guess" id="guesslabel"> Enter your guess below: </label>
<input type="text" id="guess">
<input type="submit" onclick="game()">

Answer 1

Во-первых, чтобы помочь вам в отладке, "WTF" не является для вас полезной информацией. Если вы поместите значения, которые вы пытаетесь сравнить, в сообщение, ошибка станет более ясной, потому что guessNumber - NaN.

var guessNumber = parseInt(document.getElementById('guess').value);

Это установлено в NaN, когда программа запускается, потому что значение не задано. Вам нужно переместить это внутрь функции game() (которая вызывается при нажатии кнопки «Отправить»), чтобы она могла оценить текущее значение.