title: Uncaught TypeError: Cannot set property 'onclick' of null at window.onload
body: <p>I keep getting the above error but I have all my JS wrapped in window.onload and i'm pretty sure all the id's are correct. Why can't it access the  tag in my menu? Am I not able to attach an onclick handler to an  tag?</p>
  
  <p>HMTL</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Matt Corby&lt;/title&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="js/script.js"&gt;
  &lt;/script&gt;
  &lt;script src="https://use.fontawesome.com/cd1ee9b482.js"&gt;
  &lt;/script&gt;&lt;!-- Meta Tags --&gt;
  &lt;meta name="description" content=
  "Matt Corby: Web Design and Development"&gt;
  &lt;meta name="keywords" content=
  "HTML, CSS, JavaScript, jQuery, JSON, API, Web Design, Web Development"&gt;
  &lt;meta name="author" content=
  "Matt Corby, SUNY Oneonta Class of 2016, graduate"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="menu"&gt;
    &lt;h1&gt;&lt;span class="codeText"&gt;&amp;lt&lt;/span&gt;Matt Corby&lt;span class="codeText"&gt;&amp;gt&lt;/span&gt;&lt;/h1&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#top"&gt;Top&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#web"&gt;Web Design/Development&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#cpp"&gt;C++ Programming&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#game"&gt;Game Development&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#hardware"&gt;Computer Hardware&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="contactMe"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;!-- What i'm trying to access --&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="parallax codeParallax"&gt;
  &lt;!-- contact modal --&gt;
  &lt;div id="contactModal" class="modal"&gt;
    &lt;div class="modal-content"&gt;
      &lt;span class="close"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;h3&gt;Contact me ya bish!!!&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="halfCol leftCol opaqueDesign"&gt;
  &lt;h3&gt;&lt;span class="dropcap"&gt;H&lt;/span&gt;ello, My name's &lt;span class="yellow"&gt;Matt&lt;/span&gt; and I am a
  &lt;span class="blue"&gt;frontend web developer&lt;/span&gt; who is also
  learning how to write backend code. I live in &lt;span class=
  "orange"&gt;Syracuse, NY&lt;/span&gt; and love working on creating awesome
  websites and web applications! My strengths lie in &lt;span class=
  "green"&gt;HTML&lt;/span&gt;, &lt;span class="yellow"&gt;CSS&lt;/span&gt;, &lt;span class=
  "blue"&gt;JavaScript&lt;/span&gt;, and &lt;span class="red"&gt;C++&lt;/span&gt;, but I
  have also had experience in &lt;span class="orange"&gt;game
  development&lt;/span&gt; using the &lt;span class="red"&gt;Unreal
  Engine&lt;/span&gt;. I also am a &lt;span class="green"&gt;computer
  hardware&lt;/span&gt; geek who likes building PCs. I am constantly
  learning new languages and would like to learn how to use
  &lt;span class="yellow"&gt;SQL&lt;/span&gt; and &lt;span class="blue"&gt;PHP&lt;/span&gt;
  to create backend code. In my free time I play &lt;span class=
  "red"&gt;guitar&lt;/span&gt;, music being my second obsession.&lt;/h3&gt;
  &lt;img class="sig" src="images/signature.png"&gt;&lt;/div&gt;
  &lt;div class="halfCol opaqueDesign halfColCircle"&gt;
  &lt;!-- Need to put img in div so the zoom looks better --&gt;
  &lt;img class="avatar" src="images/matt.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a name="web" id="web"&gt;&lt;/a&gt;
  &lt;div class="section"&gt;Web Design/Development&lt;/div&gt;
  &lt;div class="parallax htmlParallax"&gt;
  &lt;!-- Place a few boxes of the web design work i've done --&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="wideRow opaqueDesign"&gt;
  &lt;h3&gt;I love using HTML, CSS, and JavaScript to create websites,
  webpages, and web apps. Here's a few projects i've made.
  You can click on them to open an iframe right in this page!&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id="weatherApp" class="oneThird opaqueDesign popout" title=
  "Click to launch in page"&gt;&lt;img src="images/weatherApp.png"&gt;&lt;/div&gt;
  &lt;!-- modal --&gt;
  &lt;div id="weatherModal" class="modal"&gt;
  &lt;div class="modal-content"&gt;&lt;span class="close"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;iframe src="http://codepen.io/mcorby17/full/xOwBzB/" width=
  "1000px" height="500px"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End modal --&gt;
  &lt;div id="drumhead" class="oneThird opaqueDesign popout" title=
  "Click to launch in page"&gt;&lt;img src="images/drumhead.png"&gt;&lt;/div&gt;
  &lt;!-- modal --&gt;
  &lt;div id="drumModal" class="modal"&gt;
  &lt;div class="modal-content"&gt;&lt;span class="close"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;iframe src="http://students.oneonta.edu/corbmt91/CART206/www/a5/index.html"
  width="1000px" height="500px"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End modal --&gt;
  &lt;div id="wikiApp" class="oneThird opaqueDesign popout" title=
  "Click to launch in page"&gt;&lt;img src="images/wikipediaApp.png"&gt;&lt;/div&gt;
  &lt;!-- modal --&gt;
  &lt;div id="wikiModal" class="modal"&gt;
  &lt;div class="modal-content"&gt;&lt;span class="close"&gt;&lt;i class="fa fa-window-close" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;iframe src="http://codepen.io/mcorby17/full/vKGPmQ/" width=
  "1000px" height="500px"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End modal --&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;a name="cpp" id="cpp"&gt;&lt;/a&gt;
  &lt;div class="section"&gt;C++ Programming&lt;/div&gt;
  &lt;div class="parallax cppParallax"&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="fullRow"&gt;
  &lt;div class="twoThirdsRow opaqueDesign"&gt;
  &lt;h3&gt;The core of my Computer Science education has revolved around
  C++ and Object-Oriented Programming. These skills are transferrable
  to other OOP languages such as Python and Java. Below you can find
  some of the programs i've written.&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="box opaqueDesign"&gt;
    &lt;a href="https://github.com/mcorby17" title="Click to go to my GitHub page" target="_blank"&gt;&lt;img src="images/github.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="fullRow"&gt;
  &lt;div class="box opaqueDesign"&gt;
    &lt;h3&gt;Linked List&lt;/h3&gt;
    &lt;a class="button" href="cppProjects/linkedList.zip"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="box opaqueDesign"&gt;
    &lt;h3&gt;Tree&lt;/h3&gt;
    &lt;a class="button" href="cppProjects/Tree.cpp"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="box opaqueDesign"&gt;
    &lt;h3&gt;Chess&lt;/h3&gt;
    &lt;a class="button" href="cppProjects/ChessProgram.txt"&gt;Download&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a name="game" id="game"&gt;&lt;/a&gt;
  &lt;div class="section"&gt;Game Development with Unreal Engine&lt;/div&gt;
  &lt;div class="parallax unrealParallax"&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="bigBox bottom opaqueDesign"&gt;&lt;img src=
  "images/UnrealEngineElevator.png"&gt;&lt;/div&gt;
  &lt;div class="bigBox middle opaqueDesign"&gt;&lt;img src=
  "images/UnrealBlueprintPin.png"&gt;&lt;/div&gt;
  &lt;div class="bigBox top opaqueDesign"&gt;&lt;img src=
  "images/UnrealViewportPin.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;a name="hardware" id="hardware"&gt;&lt;/a&gt;
  &lt;div class="section"&gt;Computer Hardware Expertise&lt;/div&gt;
  &lt;div class="parallax hardwareParallax"&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="big-square opaqueDesign"&gt;
    &lt;img src="images/pc1.jpg" /&gt;
    &lt;div class="pulldown opaqueDesign"&gt;
      &lt;h3&gt;My beautiful PC&lt;/h3&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="vertical-rectangle opaqueDesign"&gt;
  &lt;h3&gt;Through my internship in IT at The Glimmerglass Festival in
  Cooperstown, NY, I learned a lot about computer hardware. I
  understand how to build a computer and what each of its parts do. I
  can diagnose and possibly fix your computer should you experience
  things such as bluescreens! I can also offer advice on what parts
  you should buy.&lt;/h3&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>window.onload = function(){
    // Grab modals
    var wmodal = document.getElementById("weatherModal");
    var dmodal = document.getElementById("drumModal");
    var wimodal = document.getElementById("wikiModal");
    var cmodal = document.getElementById("contactModal");
    //Grab elememts that trigger modals
    var triggers = document.getElementsByClassName("popout");
    var contact = document.getElementById("contactMe");
    //Grab closing 'x's
    var span = document.getElementsByClassName("close");
  
  
    contact.onclick = function(){   // ERROR cannot set property 'onclick' of null at window.onload
      cmodal.style.display = "block";
    }
    triggers[0].onclick = function(){
      wmodal.style.display = "block";
    }
    triggers[1].onclick = function(){
      dmodal.style.display = "block";
    }
    triggers[2].onclick = function(){
      wimodal.style.display = "block";
    }
  
    span[0].onclick = function(){
      cmodal.style.display = "none";
    }
    span[1].onclick = function(){
      wmodal.style.display = "none";
    }
    span[2].onclick = function(){
      dmodal.style.display = "none";
    }
    span[3].onclick = function(){
      wimodal.style.display = "none";
    }
  
    window.onclick = function(event){
      if(event.target == wmodal){
        wmodal.style.display = "none";
      }
      else if (event.target == dmodal) {
        dmodal.style.display = "none";
      }
      else if (event.target == wimodal) {
        wimodal.style.display = "none";
      }
      else if (event.target == cmodal){
        cmodal.style.display = "none";
      }
    }
  }
  </code></pre>