Unable to add an onclick event to element using JS

Question

Hey I have a span element that I am creating with JS and I want it to also have an onclick event that calls a function. I am referring to the function fillSlides() and dotFunction(), but I will show all of my functions.

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>

I tried calling dot function from the onclick of a different element (because the span I want to add it to is being created with JS) within the html but nothing happened. How do I do this and what am I doing wrong?

`currentSlide(i)` is not a function. You're calling the function immediately, and putting the result into the `onclick` property. — Barmar, Nov 09 '17 at 17:23
looks like you have an undefined element you are trying to style, too — George, Nov 09 '17 at 17:25
What are you actually trying to do? You have some images, one below the other, so far. — George, Nov 09 '17 at 17:28
Your `dotfunction()` is scoped within `showSlides(n)`. You can only access it within that function, so you could never call it from a element on your page. — wlh, Nov 09 '17 at 17:30
@Barmar What should I put then, because I want the slide that it goes to, to be different for every dot, and so each dot is associated with a different image? — BrownBoii333, Nov 09 '17 at 17:38
@GeorgeCampbell I have a page of images that upon being clicked opens a different slideshow per image. — BrownBoii333, Nov 09 '17 at 17:38
@TheYungGrandpa Use an anonymous function that calls `currentSlide(i)`. But see https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example to get the correct value of `i` in the closure. — Barmar, Nov 09 '17 at 17:40
@wlh I tried using that code within showSlide(n) but it causes an error because current slides calls showslides, and then showslides was calling current slides in an endless loop — BrownBoii333, Nov 09 '17 at 17:40
@Barmar I'm not sure how to do that, I'm fairly new at all of this — BrownBoii333, Nov 09 '17 at 17:42
Then I guess you need to read a good Javascript tutorial, SO is not a programming school. — Barmar, Nov 09 '17 at 17:43
Ok, can you clarify if this is correct: You have a page of images, and clicking one will slide a different image from the left/right to fill in that image, and each consecutive click slides to a different image, for that slot? — George, Nov 09 '17 at 17:44
no clicking one will open a slideshow carousel, each image opens a different slideshow carousel — BrownBoii333, Nov 09 '17 at 17:47
@GeorgeCampbell as you noted there is an undefined element that I'm adding style to, but I don't get why that's undefined, because create the element that it calls in the fillSlides() function which is called b4 showSlides. I get an error about this in the console but everything still works fine, how do I fix this? — BrownBoii333, Nov 09 '17 at 18:10
@TheYungGrandpa you are calling showSlides(slideIndex) in the script itself before calling FillSlide(). Do you need to call this function from the script? — ajay gandhi, Nov 09 '17 at 18:26

score 0 · Answer 1 · answered Nov 09 '17 at 18:05

Try putting your script in the head section if you want to bind click handler inside html.

Below is the fiddle that i tested with your chanegs.

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

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

"https://jsfiddle.net/ajaygandhi06/smca56fv/"

It works when you put your js inside head tag.

Unable to add an onclick event to element using JS

1 Answers1