title: sitejavascript.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null at sitejavascript.js:1
body: <p>I'm just starting to teach myself Javascript and am trying to create a menu that is activated by clicking on a button. But I keep receiving the error: Uncaught TypeError: Cannot read property 'addEventListener' of null. I've been researching it for awhile, but can't figure out why it is not working. Please see my code below:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="website.css" /&gt;
          &lt;script src="sitejavascript.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img class="himage" src="waves.jpg" style="width: 100%; height:150px;" /&gt;
          &lt;div class="nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="SecondPage.html"&gt;Second Page&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="ThirdPage.html"&gt;Third Page&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="FourthPage.html"&gt;Fourth Page&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="countrySelector"&gt;
              &lt;button id="selectCountry" class="country"&gt;Testing&lt;/button&gt;
              &lt;div id="countryList" class="countryContent"&gt;
                  &lt;a href="#"&gt;Country One&lt;/a&gt;
                  &lt;a href="#"&gt;Country Two&lt;/a&gt;
                  &lt;a href="#"&gt;Country Three&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>document.getElementById("selectCountry").addEventListener("click", dropCountry);
  function dropCountry(){
      document.getElementById("countryList").classList.toggle("show");
  };
  </code></pre>
  
  <p>The "show" is within my CSS</p>
  
  <pre><code>.show {display: block;}
  </code></pre>