Question

嘿，我有一个用JS创建的span元素，我希望它还有一个调用函数的onclick事件。我指的是函数fillSlides（）和dotFunction（），但我将展示我的所有函数。

function openModal() {
        document.getElementById('myModal').style.display = "block";
      }
    
      function closeModal() {
        document.getElementById('myModal').style.display = "none";
      }
    
      var slideIndex = 1;
      showSlides(slideIndex);
    
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
    
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
      function fillSlides(modalID){
        var container = document.getElementsByClassName("modal-content");
        var bcontainer = document.getElementById("myModal");
        var dcontainer = document.createElement('dot_content');
    
        var slides = {
          "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
          "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
          "3": ["Images/img1.jpg", "Images/img2.jpg", "Images/img3.jpg", "Images/2.jpg" ]
        };
        var modal_num = modalID.getAttribute('data-modal');
        //alert(slides[modal_num].length);
    
        for (var i = 0 ; i < slides[modal_num].length; i++) {
          var the_divs = document.createElement('div');
          var s_img = document.createElement('img'); 
          var s_dot = document.createElement('span');
    
    
    
          the_divs.className = 'mySlides';
    
          s_img.src = slides[modal_num][i];
    
          the_divs.appendChild(s_img);
    
          container[0].appendChild(the_divs); 
          dcontainer.className = 'dot-content';
          dcontainer.id = 'dot_content';
          s_dot.className = 'demo';
          
          dcontainer.appendChild(s_dot);
          container[0].appendChild(dcontainer);
          s_dot.onclick = currentSlide(i);
        }
    
     }
    /*
      function clearSlides(){
    
        var myNode = document.getElementById("modal_content");
        while (myNode.firstChild) {
          myNode.removeChild(myNode.firstChild); 
        }
      }*/
      function clearSlides() {
        var myNode = document.getElementById("modal_content");
      //use spread operator to convert nodelist to array for using
      // array methods
      var c = [...myNode.children];
      c.forEach(function(item, index) {
        console.log(item)
        // check if the current element have a class using 'contains'
        if (!item.classList.contains('elbutton')) {
          //use remove method to remove the element
          
          item.remove();          
          
        }
      })
    
    }
    
      /*
    
      function clearSlides(){
    
        var myNode = document.getElementById("modal_content");
        var childNodes = myNode.childNodes;
        for(var i=0; i<childNodes.length; i++){
          if(childNodes[i].className === "mySlides"){      
            myNode.removeChild(childNodes[i])
          }
        }
      }
      */
      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
    
        if (n > slides.length) {slideIndex = 1}
          if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
              slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
              dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
            //captionText.innerHTML = dots[slideIndex-1].alt;
          }
          function dotfunction() {
           var slides = document.getElementsByClassName("mySlides");
           var dotfunctionadder = document.getElementsByClassName("demo");
           for (var i = 0; i < slides.length; i++) {
            dotfunctionadder.onclick = currentSlide(i);
          }
        }

<body id="modal-2">
     <h2 id="title" style="text-align:center">hellkkko</h2>
    
     <div class="row">
      <div class="column">
        <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
      </div>
    </div>
    
    <div class="row">
      <div class="column">
        <img id="modal-2" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="2" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
      </div>
    </div>
    
    <div class="row">
      <div class="column">
        <img id="modal-3" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="3" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
      </div>
    </div>
    
    <div id="myModal" class="modal">
      <span class="close cursor" onclick="clearSlides(); closeModal();">&times;</span>
      <div class="modal-content" id="modal_content">
        <a class="elbutton prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="elbutton next" onclick="plusSlides(1)">&#10095;</a>
    
        
    
      </div>
      
    
    </div>

我尝试在html中调用一个不同元素的onclick调用点函数（因为我想用JS创建它的跨度），但没有发生任何事情。我该怎么做以及我做错了什么？

Answer 1

如果要在html中绑定click handler，请尝试将脚本放在head部分。

下面是我用你的chanegs测试的小提琴。

<head>
<script>
  function openModal() {
document.getElementById('myModal').style.display = "block";
}

function closeModal() {
 document.getElementById('myModal').style.display = "none";
}
..........
</script>
<head>

＆＃34; https://jsfiddle.net/ajaygandhi06/smca56fv/＆＃34;

将js放在head标签内时，它会起作用。

无法使用JS

1 个答案: