Question

我正在尝试使用幻灯片显示代码模式。当我在for循环中输入'1'而不是'i'时，它适用于第一张图片。当我在for循环中使用'i'时，我收到错误消息“无法设置属性'onclick'的null javascript” 我知道这是一些非常初学的东西...但我现在坐在这里几个小时才能找到解决方案...... 谢谢您的帮助！

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

经过一番粗略的观察，我发现身份"myModal0"的DOM节点并不存在（这很可能对你的其他前缀也是如此）它恰好是你的第一个尝试获取DOM节点。请记住，你的循环从0开始而不是1。

另请注意，您尝试分配的每个节点必须事先存在！因此，您必须在html文件中包含每个元素，或者使用JS即时创建它们。

如果你想从1开始，你可以这样做：

for (let i=1; i<x; i++) {
    // do smth ...
}

Answer 2

看起来像这段代码：

for (var i = 0; i <= 6; i++) {
  modal = document.getElementById(prefixModal + i);
  img = document.getElementById(prefixmyImg + i);
  modalImg = document.getElementById(prefixmodalImg + i); 

  // NOTE: put the code that does something IN HERE,
  // right now it's outside the loop
}

正在遍历HTML文档中包含“myModal0”到“myModal6”的ID的所有元素，而其他两个前缀“myImg”和“img”则相同。

我没有在HTML文档中看到所有这些元素。我只看到“myModal1”和“myModal2”（以及“myImg”和“img”的元素1和2。

看起来你需要减小循环的大小，所以它只遍历你实际拥有的元素，或者你需要填写其余的HTML并放入其余的元素（一路上）从0到（包括）6。

哦，这里还有另一件事要记住，导致错误的实际代码都不在循环内部。您在循环中所做的只是设置变量的名称。所以后面的代码总是使用“myModal6”，因为这是循环设置名称的最后一件事。

Answer 3

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

将for循环更改为

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

Javascript：通过ID迭代 - ＆gt;无法设置null javascript的属性'onclick'

3 个答案: