Javascript 未捕获类型错误：无法设置属性'；onclick'；window.onload处的空值_Javascript

Javascript 未捕获类型错误：无法设置属性'；onclick'；window.onload处的空值

javascript

Javascript 未捕获类型错误：无法设置属性'；onclick'；window.onload处的空值,javascript,Javascript,我不断地得到上面的错误，但是我把我所有的JS都包装在window.onload中，我很确定所有的id都是正确的。为什么它不能访问我菜单中的标签？我是否无法将onclick处理程序附加到标记 HMTL 为什么不在元素本身上使用onclick？示例：我尝试将所有javascript都保留在html之外，但我会尝试that@MattCorby包含此代码的js文件的名称是什么？它是script.js，我在html中正确地包含了脚本@HackerDave我做了一个setDisplay函数，修复了错误，但是

我不断地得到上面的错误，但是我把我所有的JS都包装在window.onload中，我很确定所有的id都是正确的。为什么它不能访问我菜单中的标签？我是否无法将onclick处理程序附加到标记

HMTL

为什么不在元素本身上使用

onclick

？示例：

我尝试将所有javascript都保留在html之外，但我会尝试that@MattCorby包含此代码的js文件的名称是什么？它是script.js，我在html中正确地包含了脚本@HackerDave我做了一个setDisplay函数，修复了错误，但是它仍然没有显示模态。尽管脚本可以与其他模态一起工作。对我来说很好。尝试

window.addEventListener（“加载”，函数（）{

}）替代。为什么不在元素本身上使用onclick
？示例：
我尝试将所有javascript都保留在html之外，但我会尝试that@MattCorby包含此代码的js文件的名称是什么？它是script.js，我在html中正确地包含了脚本@HackerDave我做了一个setDisplay函数，修复了错误，但是它仍然没有显示模态。尽管脚本可以与其他模态一起工作。对我来说很好。尝试window.addEventListener（“加载”，函数（）{
..}）取而代之。
<!DOCTYPE html>
<html>
<head>
<title>Matt Corby</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/script.js">
</script>
<script src="https://use.fontawesome.com/cd1ee9b482.js">
</script><!-- Meta Tags -->
<meta name="description" content=
"Matt Corby: Web Design and Development">
<meta name="keywords" content=
"HTML, CSS, JavaScript, jQuery, JSON, API, Web Design, Web Development">
<meta name="author" content=
"Matt Corby, SUNY Oneonta Class of 2016, graduate">
</head>
<body>
<div id="menu">
  <h1><span class="codeText">&lt</span>Matt Corby<span class="codeText">&gt</span></h1>
  <ul>
  <li><a href="#top">Top</a></li>
  <li><a href="#web">Web Design/Development</a></li>
  <li><a href="#cpp">C++ Programming</a></li>
  <li><a href="#game">Game Development</a></li>
  <li><a href="#hardware">Computer Hardware</a></li>
  <li><a href="#" id="contactMe">Contact</a></li> <!-- What i'm trying to access -->
</ul>
</div>
<div class="parallax codeParallax">
<!-- contact modal -->
<div id="contactModal" class="modal">
  <div class="modal-content">
    <span class="close"><i class="fa fa-window-close" aria-hidden="true"></i></span>
    <h3>Contact me ya bish!!!</h3>
  </div>
</div>
<div class="wrapper">
<div class="halfCol leftCol opaqueDesign">
<h3><span class="dropcap">H</span>ello, My name's <span class="yellow">Matt</span> and I am a
<span class="blue">frontend web developer</span> who is also
learning how to write backend code. I live in <span class=
"orange">Syracuse, NY</span> and love working on creating awesome
websites and web applications! My strengths lie in <span class=
"green">HTML</span>, <span class="yellow">CSS</span>, <span class=
"blue">JavaScript</span>, and <span class="red">C++</span>, but I
have also had experience in <span class="orange">game
development</span> using the <span class="red">Unreal
Engine</span>. I also am a <span class="green">computer
hardware</span> geek who likes building PCs. I am constantly
learning new languages and would like to learn how to use
<span class="yellow">SQL</span> and <span class="blue">PHP</span>
to create backend code. In my free time I play <span class=
"red">guitar</span>, music being my second obsession.</h3>
<img class="sig" src="images/signature.png"></div>
<div class="halfCol opaqueDesign halfColCircle">
<!-- Need to put img in div so the zoom looks better -->
<img class="avatar" src="images/matt.jpg"></div>
</div>
</div>
<a name="web" id="web"></a>
<div class="section">Web Design/Development</div>
<div class="parallax htmlParallax">
<!-- Place a few boxes of the web design work i've done -->
<div class="wrapper">
<div class="wideRow opaqueDesign">
<h3>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!</h3>
</div>
<div id="weatherApp" class="oneThird opaqueDesign popout" title=
"Click to launch in page"><img src="images/weatherApp.png"></div>
<!-- modal -->
<div id="weatherModal" class="modal">
<div class="modal-content"><span class="close"><i class="fa fa-window-close" aria-hidden="true"></i></span>
<iframe src="http://codepen.io/mcorby17/full/xOwBzB/" width=
"1000px" height="500px"></iframe></div>
</div>
<!-- End modal -->
<div id="drumhead" class="oneThird opaqueDesign popout" title=
"Click to launch in page"><img src="images/drumhead.png"></div>
<!-- modal -->
<div id="drumModal" class="modal">
<div class="modal-content"><span class="close"><i class="fa fa-window-close" aria-hidden="true"></i></span>
<iframe src="http://students.oneonta.edu/corbmt91/CART206/www/a5/index.html"
width="1000px" height="500px"></iframe></div>
</div>
<!-- End modal -->
<div id="wikiApp" class="oneThird opaqueDesign popout" title=
"Click to launch in page"><img src="images/wikipediaApp.png"></div>
<!-- modal -->
<div id="wikiModal" class="modal">
<div class="modal-content"><span class="close"><i class="fa fa-window-close" aria-hidden="true"></i></span>
<iframe src="http://codepen.io/mcorby17/full/vKGPmQ/" width=
"1000px" height="500px"></iframe></div>
</div>
<!-- End modal --></div>
</div>
<a name="cpp" id="cpp"></a>
<div class="section">C++ Programming</div>
<div class="parallax cppParallax">
<div class="wrapper">
<div class="fullRow">
<div class="twoThirdsRow opaqueDesign">
<h3>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.</h3>
</div>
<div class="box opaqueDesign">
  <a href="https://github.com/mcorby17" title="Click to go to my GitHub page" target="_blank"><img src="images/github.png"></a>
</div>
</div>
<div class="fullRow">
<div class="box opaqueDesign">
  <h3>Linked List</h3>
  <a class="button" href="cppProjects/linkedList.zip">Download</a>
</div>
<div class="box opaqueDesign">
  <h3>Tree</h3>
  <a class="button" href="cppProjects/Tree.cpp">Download</a>
</div>
<div class="box opaqueDesign">
  <h3>Chess</h3>
  <a class="button" href="cppProjects/ChessProgram.txt">Download</a>
</div>
</div>
</div>
</div>
<a name="game" id="game"></a>
<div class="section">Game Development with Unreal Engine</div>
<div class="parallax unrealParallax">
<div class="wrapper">
<div class="bigBox bottom opaqueDesign"><img src=
"images/UnrealEngineElevator.png"></div>
<div class="bigBox middle opaqueDesign"><img src=
"images/UnrealBlueprintPin.png"></div>
<div class="bigBox top opaqueDesign"><img src=
"images/UnrealViewportPin.png"></div>
</div>
</div>
<a name="hardware" id="hardware"></a>
<div class="section">Computer Hardware Expertise</div>
<div class="parallax hardwareParallax">
<div class="wrapper">
<div class="big-square opaqueDesign">
  <img src="images/pc1.jpg" />
  <div class="pulldown opaqueDesign">
    <h3>My beautiful PC</h3>
  </div>

</div>
<div class="vertical-rectangle opaqueDesign">
<h3>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.</h3>
</div>
</div>
</div>
</body>
</html>

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";
    }
  }
}