Javascript:遍历 ID -> 无法设置 null javascript 的属性 'onclick'

Question

我正在尝试用幻灯片编写模式。当我在 for 循环中输入“1”而不是“i”时，它对于第一张图片效果很好。当我在 for 循环中使用“i”时，收到错误消息“无法设置 null javascript 的属性“onclick”” 我知道这是一些非常初学者的东西......但我现在坐在这里几个小时来寻找解决方案...... 感谢您的帮助!

window.onload = function() {
    var modal;
    var prefixModal = 'myModal';
    var img;
    var prefixmyImg = 'myImg';
    var modalImg;
    var prefixmodalImg = 'img';

    for (var i = 0; i <= 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 <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";
     }
};

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

HTML:

<div class="container_slideshow">
  <div class="content_slideshow">
    <!-- Trigger the Modal -->
    <img class="slider" id="myImg1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
      <!-- The Modal -->
    <a class="close">
      <div id="myModal1" class="modal">
        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="img1">
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
      </div>
    </a>
  </div>
    <div class="content_slideshow">
    <!-- Trigger the Modal -->
    <img class="slider" id="myImg2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
      <!-- The Modal -->
    <a class="close">
      <div id="myModal2" class="modal">
        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="img2">
        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
      </div>
    </a>
  </div>
</div>

Answer 1

原因是for (var i = 0; i <= 6; i++) { 。计数从0开始，它会尝试查找id为myModal6的dom元素.

将 for 循环更改为

for (var i = 0; i < 6; i++) {