Why doesn't the script for a modal window?

Good day! There is a slider made for Slick Slider. Wanted to make pictures of the slider modal, meaning that when you click on the picture a window POPs up with a cross on it (then close it) and a picture, but for some reason does not work, I thought that thing in the script, I have tried to rewrite it with jQuery, but to no avail. Below point code.
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<div id="myModal" class="modal">
 <span class="close">×</span>
 <img class="modal-content" id="img01">
<div class="gallery">
 <img class="img" src="images/interior_1.jpg" alt="#">
 <img class="img" src="images/interior_2.jpg" alt="#">
 <img class="img" src="images/interior_3.jpg" alt="#">
 <img class="img" src="images/interior_4.jpg" alt="#">
 <img class="img" src="images/interior_5.jpg" alt="#">

.modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 5; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

.modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 max-height: 500px;

.modal-content { 
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6 s;
 animation-name: zoom;
 animation-duration: 0.6 s;

@-webkit-keyframes zoom {
 from {-webkit-transform:scale(0)} 
 to {-webkit-transform:scale(1)}

@keyframes zoom {
 from {transform:scale(0)} 
 to {transform:scale(1)}

.close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3 s;

.close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;

Java Script
var modal = document.getElementById("myModal");

 // Get the image and insert it inside the modal
 var img = document.getElementsByClassName("img");
 var modalImg = document.getElementById("img01");
 img.onclick = function(){
 modal.style.display = "block";
 modalImg.src = this.src;

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 // When the user clicks on <span> (x) close the modal
 span.onclick = function() { 
 modal.style.display = "none";

If who rummages in such things, please help, I have a couple of hours sat. but I can not understand why is not working.
June 10th 19 at 15:50
1 answer
June 10th 19 at 15:52
in pure js you want to apply the event to each element of the array.
people in the comments is right, it is wrong to cause inconvenience kopipasta help people
Try to recover about jsfiddle, I just don't know how to work with it. Unfortunately, or maybe fortunately, I had already solved this problem, however spent another 3 hours)))) But still thank You! There is still a very important for those who will look for the answer to this question, and will find this post JAVA SCRIPT CODE to EMAIL to BEFORE the CLOSING TAG IN the TAG <script></code> BECAUSE IF you WRITE IN a SEPARATE FILE Ala script.js NEITHER MY SOLUTION NOR a SOLUTION to THIS KIND MAN FOR some REASON I doesn'T WORK (at least for me). Thank You again that helped)</script> - Kelsie commented on June 10th 19 at 15:55
it's because everything in the body is executed as soon as the client browser.
In the case of a separate file, it comes not linear and must specify the date of its execution, for example
document.addEventListener("DOMContentLoaded", function(event) { 
 //do work

which means to carry current after loading the content - juana.Morar commented on June 10th 19 at 15:58
, thank you for clarify me this point, I didn't know that. - Kelsie commented on June 10th 19 at 16:01

Find more questions by tags JavaScriptCSSLayout