title: How to fix "Cannot read property 'addEventListener' of null" error
body: <p>I am learning javascript from Mozilla developer network(MDN). I am getting error in Number guessing game.
  The error says "Uncaught TypeError: Cannot read property 'addEventListener' of null" at line 46.</p>
  
  <p><img src="https://i.imgur.com/wTweFeV.png" alt="Screenshot of Error"></p>
  
  <p>I have checked and matched code line by line many times but i am unable to resolve the problem. The code works partially(some functions don't work) when I remove script.js external file and put the code in index.html inside  tag. Here's the code. Please understand that the javascript code and HTML are in different file.</p>
  
  <pre><code>let randomNumber = Math.floor(Math.random() * 100) + 1;
  
  const guesses = document.querySelector('.guesses');
  const lastResult = document.querySelector('.lastResult');
  const loworHi = document.querySelector('.loworHi');
  
  const guessSubmit = document.querySelector('.guessSubmit');
  const guessField = document.querySelector('.guessField');
  
  let guessCount = 1;
  let resetButton;
  
  
  function checkGuess() {
    let 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 &lt; randomNumber) {
        loworHi.textContent = 'Last guess was too low!';
      } else if (userGuess &gt; 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;
  
    const resetParas = document.querySelectorAll('.resultParas p');
    for (let i = 0; i &lt; 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;
  } 
  
  
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;title&gt;Number guessing game&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Number guessing game&lt;/h1&gt;
  
      &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. 
          We'll tell you if your guess was too high or too low.&lt;/p&gt;
  
      &lt;div class="form"&gt;
          &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;
          &lt;input type="text" id="guessField" class="guessField"&gt;
          &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;
      &lt;/div&gt;
  
      &lt;div class="resultParas"&gt;
          &lt;p class="guesses"&gt;&lt;/p&gt;
          &lt;p class="lastResult"&gt;&lt;/p&gt;
          &lt;p class="lowOrHi"&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt; 
  </code></pre>