javascript - Modal 'close' not working -

i've taken working script , adjusted allow multiple independent modals , no longer able close of modals. receive error:

cannot set property 'display' of undefined @ htmlspanelement.span.onclick

neither window.onclick or document.onclick functions working. here's jsfiddle

<div class="contentsection">     <a class="popupbtn" data-modal="modal-window-one">open me!</a> </div>  <div id="modal-window-one" class="popupmodal modal">     <span class="close">&times;</span>     <div class="modalcontent">         <p>here's content!</p>     </div> </div>  <div class="contentsection">     <a class="popupbtn" data-modal="modal-window-two">...or open me!</a> </div>  <div id="modal-window-two" class="popupmodal modal">     <span class="close">&times;</span>     <div class="modalcontent">         <p>here's different content!</p>     </div> </div>   var modal = document.getelementsbyclassname('popupmodal'); var btn = document.getelementsbyclassname("popupbtn"); var span = document.getelementsbyclassname("close")[0];  (var = 0; < btn.length; i++) {     var thisbtn = btn[i];     thisbtn.addeventlistener("click", function(){         var modal = document.getelementbyid(this.dataset.modal);         modal.style.display = "block";     }, false); }  span.onclick = function() {     modal.style.display = "none"; }  window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } } 

modal htmlcollection (array object), have class popupmodal more 1 element. need iterate through array , set display = none all.

also, have assigned click first close element only, need iterate through span elements , attach click both span elements close both modal windows.

or, can iterate through modal array , attach event listener close modal if event.target span.

var modal = document.getelementsbyclassname('popupmodal');  var btn = document.getelementsbyclassname("popupbtn");  var span = document.getelementsbyclassname("close");    (var = 0; < btn.length; i++) {    var thisbtn = btn[i];    thisbtn.addeventlistener("click", function() {      var modal = document.getelementbyid(this.dataset.modal);      modal.style.display = "block";    }, false);  }      (var = 0; < modal.length; i++) {    modal[i].addeventlistener("click", function(e) {      if(e.target.classname === 'close') {        this.style.display = 'none';      }    }, false);  }

.popupbtn {    cursor: pointer;  }    .modal {    display: none;    position: fixed;    z-index: 1;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgb(0, 0, 0);    background-color: rgba(0, 0, 0, 0.4);    cursor: pointer;  }    .modalcontent {    background-color: #fefefe;    margin: 15% auto;    padding: 20px;    border-top: 8px solid #81c8e8;    border-radius: 4px;    width: 50%;    box-shadow: 0px 2px 8px #222;    cursor: default;    font-size: .9em;  }    .close {    color: #ccc;    float: right;    font-size: 25pt;    font-weight: bold;    transition: ease-in-out .5s;    padding: 10px 30px;    background-color: #2b3d52;  }    .close:hover,  .close:focus {    color: #fff;    text-decoration: none;    cursor: pointer;  }

<div class="contentsection">    <a class="popupbtn" data-modal="modal-window-one">open me!</a>  </div>    <div id="modal-window-one" class="popupmodal modal">    <span class="close">&times;</span>    <div class="modalcontent">      <p>        here's content!      </p>    </div>  </div>    <div class="contentsection">    <a class="popupbtn" data-modal="modal-window-two">...or open me!</a>  </div>    <div id="modal-window-two" class="popupmodal modal">    <span class="close">&times;</span>    <div class="modalcontent">      <p>        here's different content!      </p>    </div>  </div>