title: Javascript: Iterate through ID -> cannot set property 'onclick' of null javascript
body: <p>I'm trying to code a modal with a slideshow. It works fine for the first picture when I type '1' instead of 'i' in the for loop. When I use 'i' in the for loop I get the error message "cannot set property 'onclick' of null javascript"
  I know that this is some very beginner stuff... but I'm sitting here now for hours to find a solution...
  Thank you for your help! </p>
  
  <pre><code>window.onload = function() {
      var modal;
      var prefixModal = 'myModal';
      var img;
      var prefixmyImg = 'myImg';
      var modalImg;
      var prefixmodalImg = 'img';
  
      for (var i = 0; i &lt;= 6; i++) {
        modal = document.getElementById(prefixModal + i);
        img = document.getElementById(prefixmyImg + i);
        modalImg = document.getElementById(prefixmodalImg + i);   
      }
  
       var closey = document.getElementsByClassName('close');
  
       img.onclick = function(){
       modal.style.display = "block";
  
       modalImg.src = this.src;
  }
  
  // Get the &lt;span&gt; element that closes the modal
       var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks on &lt;span&gt; (x), close the modal
       span.onclick = function() { 
       modal.style.display = "none";
       }
  };
  
   .container_slideshow {
          white-space: nowrap;
          overflow-y: hidden;
          overflow-x: scroll;
          display: block;
          height: 8rem;
          margin-top: 1rem;
          min-width: 100%;
      }
  
      .content_slideshow {
          display: inline-block;
          height: 100%;
          width: 40vw;
          background-color: darkgray;
          margin-left: 0;
          margin-right: .5rem;
      }
  
      .content_slideshow:last-child {
          margin: 0;
      }
  }
  
  /* Style the Image Used to Trigger the Modal */
  #myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 50%; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: scroll; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(57,61,69,0.6); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close2 {
      display: none;
      position: absolute;
      color: #f1f1f1;
      transition: 0.3s;
      width: 100%;
      height: 100%;
  }
  
  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container_slideshow"&gt;
    &lt;div class="content_slideshow"&gt;
      &lt;!-- Trigger the Modal --&gt;
      &lt;img class="slider" id="myImg1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt=""&gt;
        &lt;!-- The Modal --&gt;
      &lt;a class="close"&gt;
        &lt;div id="myModal1" class="modal"&gt;
          &lt;!-- Modal Content (The Image) --&gt;
          &lt;img class="modal-content" id="img1"&gt;
          &lt;!-- Modal Caption (Image Text) --&gt;
          &lt;div id="caption"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
      &lt;div class="content_slideshow"&gt;
      &lt;!-- Trigger the Modal --&gt;
      &lt;img class="slider" id="myImg2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt=""&gt;
        &lt;!-- The Modal --&gt;
      &lt;a class="close"&gt;
        &lt;div id="myModal2" class="modal"&gt;
          &lt;!-- Modal Content (The Image) --&gt;
          &lt;img class="modal-content" id="img2"&gt;
          &lt;!-- Modal Caption (Image Text) --&gt;
          &lt;div id="caption"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>