Global variable in number guessing game

Question

I'm trying to make the standard number guessing game that MDN provides in their JS tutorial. I tried tweaking it a bit making different functions for the different scenarios.

It seems the global variable var userGuess = parseInt(guessField.value) is not working as your previous guess always comes up as NaN.

Also when the game resets the showWin() and showLoss() functions work but not the showError() function.

I am very new to JS and coding in general so there is most likely a silly mistake somewhere, if anyone could help me on this problem, that would be greatly appreciated!

var randNum = Math.floor(Math.random() * 100) + 1;
var guessField = document.querySelector('.guessField');
var guessSubmit = document.querySelector('.guessSubmit');
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessCount = 1;
var resetButton;
var userGuess = parseInt(guessField.value);

function checkGuess() {

  if(guessCount === 1) {
    guesses.textContent = "Previous Guesses: ";
  }
  guesses.textContent += userGuess + ' ';

  if(userGuess === randNum) {
    showWin();
  } else if(guessCount === 10) {
    showLoss();
  } else {
    showError();
  }

  guessCount++;
  guessField.value = '';
  guessField.focus();
}

guessSubmit.addEventListener('click', checkGuess);

function showWin() {
  lastResult.textContent = 'You won nice job schmuck';
  lastResult.style.backgroundColor = 'green';
  gameOver();
}

function showError() {

  lastResult.textContent = 'Sorry, wrong guess';
  if(userGuess > randNum) {
    lowOrHi.textContent = 'Your guess was too high';
  } else if(userGuess < randNum) {
    lowOrHi.textContent = 'Your guess was too low';
  }
}

function showLoss() {
  lastResult.textContent = 'You lost, you schmuck';
  lastResult.style.backgroundColor = 'red';
  gameOver();
}

function gameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'New Game';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}

function resetGame() {
  guessCount = 1;
  var resetParas = document.querySelectorAll('.resultParas');

  for(i = 0; i < resetParas.length; i++) {
    resetParas[i].textContent = '';
  }

  guessField.disabled = false;
  guessSubmit.disabled = false;
  resetButton.parentNode.removeChild(resetButton);
  lastResult.style.backgroundColor = 'white';
  randNum = Math.floor(Math.random() * 100) + 1;
}

<h1>Guessing Game</h1>
<p>Type in a number between 1 and 100 and I will tell you if it is too high or low.</p>
<form>
  <label for="guessField">Enter a guess: </label>
  <input type="text" id="guessField" class="guessField"/>
  <input type="button" value="Submit Guess" class="guessSubmit"/>
</form>

<div class='resultParas'>
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
</div>

Answer 1

In your script, you call

parseInt(guessField.value) // effectively that is parseInt("") when it's empty

Calling parseInt() with an empty string returns NaN;

MDN in their example use:

var userGuess = Number(guessField.value);

Number("") returns a 0 number value.

You would also need to update the value of userGuess every time you call checkGuess(). So the alterations you need are:

// ... code
var userGuess = Number(guessField.value);

// ... the rest of code

function checkGuess() {
    userGuess = Number(guessField.value)

    // ... rest of code
}
// rest of code

You don't have to use Number() of course, you could also do some other condition checking, but Number() is an elegant way of accepting either numbers or an empty string.

UPDATE New jsbin here.

For the resetGame() part: you were selecting the .resultParas like:

var resetParas = document.querySelectorAll('.resultParas');

Then you iterated over the results of that and replaced the .textContent of those elements. But those were not simple text nodes, they were parapgraph nodes with text nodes inside them. I changed it to:

var resetParas = document.querySelector('.resultParas').children;

It should be working! I've put some comments in the jsfiddle for more explanation.