What went wrong? Troubleshooting JavaScript

MDN Learn
#1

Hi all,

I’m just working through the Javascript tutorial and am having difficulty with ‘Syntax errors round two’. I’ve added the dot before the lowOrHi variable, but now when I save and try to play the game, I get an error “TypeError: lowOrHi is null” on 75:9. Line 75 is a closing brace, but the line directly before is:

lowOrHi.textContent = ‘Last guess was too high!’;

I’ve looked at all instances of lowOrHi, but can’t find an instance of it that doesn’t look right.

I’d be grateful if anyone is able to advise please.

Best wishes,
Max

#2

Hi @mad.max,

The lowOrHi variable is not spelt wrong at any point. The error here is that it is not being set to the correct value. It should be set to a reference to the <p class="lowOrHi"></p> element, but instead it is being set to null.

There is something wrong with the document.querySelector() call on line 48 that is stopping it from being set correctly. See if you can work it out.

If you get stuck, it tells you the answer later on in the “Syntax errors round two” section of the doc. Or feel free to ask for more help here.

#3

Hi Chris,

Thanks for your quick reply and sorry it’s taken me a while to respond.

Adding the dot to reference the CSS class is what I did and it fixed the error at line 48 (or thereabouts), the problem was that I then got a subsequent error at line 75. Despite being a similar “null” error, I can’t find any additional instance where the lowOrHi element is missing the dot (so it references the CSS class).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Number guessing game</title>

    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
      <h1>Number guessing game</h1>

      <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>

<div class="form">
  <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
  <input type="submit" value="Submit guess" class="guessSubmit">
</div>

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

</body>

<script>
  var randomNumber = Math.floor(Math.random()*100) + 1;
  var guesses = document.querySelector('.guesses');
  var lastResult = document.querySelector('.lastResult');
  var lowOrHi = document.querySelector('.lowOrHi');
  var guessSubmit = document.querySelector('.guessSubmit');
  var guessField = document.querySelector('.guessField');
  var guessCount = 1;
  var resetButton;
  function checkGuess() {
 
    var userGuess = Number(guessField.value);
    if(guessCount === 1) {
      guesses.textContent = 'Previous guesses: ';
    }
    guesses.textContent += userGuess + ' ';
 
    if(userGuess === randomNumber) {
      lastResult.textContent = 'Congratulations! You got it right!';
      lastResult.style.backgroundColor = 'green';
      lowOrHi.textContent = '';
      setGameOver();
    } else if(guessCount === 10) {
      lastResult.textContent = '!!!GAME OVER!!!';
      setGameOver();
    } else {
      lastResult.textContent = 'Wrong!';
      lastResult.style.backgroundColor = 'red';
      if(userGuess < randomNumber) {
        lowOrHi.textContent = 'Last guess was too low!';
      } else if(userGuess > randomNumber) {
        lowOrHi.textContent = 'Last guess was too high!';
      }
    }
 
    guessCount++;
    guessField.value = '';
    guessField.focus();
  }
  guessSubmit.addEventListener('click', checkGuess);
  
  function setGameOver() {
	  guessField.disabled = true;
	  guessSubmit.disabled = true;
	  resetButton = document.createElement('button');
	  resetButton.textContent = 'Start new game';
	  document.body.appendChild(resetButton);
	  resetButton.addEventListener('click', resetGame);
  }
  
  function resetGame() {
	  guessCount = 1;
	
	  var resetParas = document.querySelectorAll('.resultParas p');
	  for(var i = 0; i < resetParas.length; i++) {
		  resetParas[i].textContent = '';
	  }
	  resetButton.parentNode.removeChild(resetButton);
	
	  guessField.disabled = false;
	  guessSubmit.disabled = false;
	  guessField.value = '';
	  guessField.focus();
	
	  lastResult.style.backgroundColor = 'white';
	
	  randomNumber = Math.floor(Math.random()*100) + 1;
  }
</script>
</html>