title: Uncaught TypeError: Cannot read property 'addEventListener' of null (querySelector)
body: <p>I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'addEventListener' of null</p>
  </blockquote>
  
  <p><code>addEventListener</code> works perfectly fine on a single id (menu)... Is there a restriction that I can't use it on querySelector?</p>
  
  <p>(Yes, JavaScript is at the bottom of the HTML document)</p>
  
  <p>Any help will be appreciated.</p>
  
  <p><a href="https://plnkr.co/edit/AIAOZk40ssoofpvrt9dm?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/AIAOZk40ssoofpvrt9dm?p=preview</a></p>
  
  <pre><code>var menu = document.getElementById("menu");
  var area = document.querySelector("#menu + #envelope + #links");
  
  menu.addEventListener("mouseenter", addHref);
  area.addEventListener("mouseleave", remHref);
  
  menu.addEventListener("click", addHref);
  document.addEventListener("click", function (){
      if (this != area){
          remHref();
      }
  });
  
  function remHref (){
      document.getElementById("google").removeAttribute("href");
      document.getElementById("mysite").removeAttribute("href");
  }
  
  function addHref (){
      setTimeout(activate, 2500);
  }
  
  function activate (){
      document.getElementById("google").setAttribute("href", "https://www.google.com");
      document.getElementById("mysite").setAttribute("href", "https://www.mywebsite.com");
  }
  </code></pre>
  
  <pre><code>    &lt;div id="menu"&gt;Click here to browse the internet.
          &lt;div id="envelope"&gt;
              &lt;div id="links" &gt;
                  &lt;div&gt;&lt;a &gt;&lt;img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div style="width: 20%;"&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;a &gt;&lt;img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre><code>#menu{
      height: 10vh;
      background-color: red;
      text-align: center;
      transition: all 1s ease-out;
      padding-top: 5vh;
  }
  
  #menu:hover{
      color: red;
  }
  
  #envelope{
      height: 0;
      display: block;
      visibility: hidden;
      background-color: blue;
      min-width: 100%;
      z-index: 1;
      position: absolute;
      left: 0;
      content: "";
      opacity: 0;
      transition: all 1.3s ease-out;
  }
  
  #links{
      height: 0;
      visibility: hidden;
      display: flex;
      background-color: pink;
      justify-content: center;
      z-index: 2;
      min-width: 100%;
      opacity: 0;
      transition: all 1s ease-in;
  }
  
  
  #google{
      margin-top: -1vh;
      width: 150px;
  }
  
  #mysite{
      padding-left: 5%;
      margin-top: -1vh;
      width: 150px;
  }
  
  #menu:hover #envelope{
      height: 100px;
      opacity: 1;
      visibility: visible;
  }
  
  #menu:focus #envelope{
      height: 100px;
      opacity: 1;
      visibility: visible;
  }
  
  #menu:hover #links{
      opacity: 1;
      height: 300px;
      visibility: visible;
  }
  
  #menu:focus #links{
      opacity: 1;
      height: 300px;
      visibility: visible;
  }
  </code></pre>