title: Uncaught TypeError: Cannot read property addEventListener of null
body: <p>Im working on an assignment for my javascript class, and I keep getting the error </p>
  
  <p>fetch_page.js:109 Uncaught TypeError: Cannot read property 'addEventListener' of null
      at addEventListeners (fetch_page.js:109)
      at fetch_page.js:121</p>
  
  <p>I'll be honost, I don't understand javascript for crap, but I'm forced to take this class for my network admin degree. Can anyone point out where I'm making this error?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('DOMContentLoaded', (function() {
    var contents;
  
    var protocol;
    var hostname;
    var directory;
    var file;
  
    function parseBase() {
      var pos, slashPos;
      var remainder;
  
      pos = BASE.indexOf('://');
      protocol = BASE.substr(0, pos);
      remainder = BASE.substr(pos + 3);
      slashPos = remainder.indexOf('/');
      if (slashPos === -1) {
        hostname = remainder;
        directory = "";
        file = "";
      } else {
        hostname = remainder.substr(0, slashPos);
        remainder = remainder.substr(slashPos + 1);
        slashPos = remainder.lastIndexOf('/');
        if (slashPos === -1) {
          directory = "";
          file = remainder;
        } else {
          directory = remainder.substr(0, slashPos);
          file = remainder.substr(slashPos + 1);
        }
      }
      console.log("protocol:", protocol);
      console.log("hostname:", hostname);
      console.log("directory:", directory);
      console.log("file:", file);
    }
  
    function relativeToAbsolute(url) {
      if (url.indexOf('://') &gt; -1) { // http://somedomain.com/path/file.html
        return url;
      } else if (url[0] === '/') { // /path/file.html
        return protocol + "://" + hostname + url;
      } else { // path/file.html
        if (directory === "") {
          return protocol + "://" + hostname + "/" + url;
        } else {
          return protocol + "://" + hostname + "/" + directory + "/" + url;
        }
      }
    }
  
    function parsePage() {
      var parser = new DOMParser();
      contents = parser.parseFromString(atob(PAGE), "text/html");
      console.log(contents);
    }
  
    function moveChildren(source, destination) {
      while (source.childNodes.length &gt; 0) {
        var child = source.childNodes[0];
        source.removeChild(child);
        destination.appendChild(child);
      }
    }
  
    function fixTags(tagName, attribute) {
      var tags = contents.getElementsByTagName(tagName);
  
      for (var counter = 0; counter &lt; tags.length; counter++) {
        var url = tags[counter].getAttribute(attribute);
        if (url) {
          tags[counter].setAttribute(attribute, relativeToAbsolute(url));
        }
      }
    }
  
    function fixRedirectedTags(tagName, attribute) {
      var tags = contents.getElementsByTagName(tagName);
  
      for (var counter = 0; counter &lt; tags.length; counter++) {
        var url = tags[counter].getAttribute(attribute);
        if (url) {
          tags[counter].setAttribute(attribute,
            window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(relativeToAbsolute(url)));
  
        }
      }
    }
  
    function fixURLs() {
      fixTags('img', 'src');
      fixTags('script', 'src');
      fixTags('link', 'href');
      fixRedirectedTags('a', 'href');
    }
  
    function moveContent() {
      moveChildren(contents.head, document.head);
      moveChildren(contents.body, document.getElementById('contents'));
    }
  
    function submit() {
      console.log("submitted:", encodeURIComponent(document.getElementById('urlBox').value));
    }
  
    function addEventListeners() {
      document.getElementById('goButton').addEventListener('click', submit);
      document.getElementById('urlBox').addEventListener('keydown', function(event) {
        if (event.keyCode == 13 || event.keyCode == 10) {
          submit();
        }
      });
    }
  
    return function() {
      parseBase();
      parsePage();
      fixURLs();
      moveContent();
      addEventListeners();
    }
  })())</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   margin: 0px;
  }
  #searchBox {
   background: black;
   color: white;
   width: 100%;
   text-align: center;
   vertical-align: middle;
   padding: 10px;
   }
  #goButton {
   background: red;
   color: black;
   padding: 4px
   font-weight: bold;
   font-family: Arial;
   font-size: .75em;
   vertical-align: middle;
   cursor: pointer;
  }
  #urlBox {
   width: 50%
  }
  #contents {
   border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
   $url = isset ($_GET['url']) ? $_GET['url'] : "http://eloquentjavascript.net/";
   $contents = base64_encode(mb_convert_encoding(file_get_contents($url), "HTML-ENTITIES","UTF-8"));
   ?&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Fetch Page&lt;/title&gt;
   &lt;link rel="stylesheet" href="fetch_page.css"&gt;
   &lt;script src="fetch_page.js"&gt;&lt;/script&gt;
   &lt;script&gt;
   var BASE = "&lt;?php echo $url; ?&gt;";
   var PAGE = "&lt;?php echo $contents; ?&gt;";
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="searchBox"&gt;Type a URL here: &lt;input type="text" id=urlBox"&gt; &lt;span id="goButton"&gt;GO&lt;/span&gt;&lt;/div&gt;
   &lt;div id="tocContainer"&gt;
   &lt;div id="toc"&gt;[toc goes here]&lt;/div&gt;
   &lt;p id="contents"&gt;Hello World!&lt;/p&gt;
   &lt;div id="contents"&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>