Help in understanding javascript functions from a snippet



  • Hello everyone, thank you to whoever reads and helps me with this as this is a noob question.

    I have been learning javascript and I look up snippets and other code to try and understand the logic and ways of using functions to create things. I have been racking my brain trying to understand a javascript code for a multiple slideshow. From the little bit that I gather, the data for the slideshows is in two arrays but I don't get how both arrays are connected to each other to pass data between the two arrays. I think I'm confusing myself or not understanding the hierarchy of the actual code...... I just need a fresh outlook on understanding the logic behind this.

    This (arrow)anchor tag below pushes the function to change the slides.

    <a href="#" onclick="plusSlides(-1,1)">go</a> 
    

    The code below is for the slideshows.... i can't grasp how the data is being manipulated.... I know the data for each slideshow is in an array, but i don't know how to add more slideshows to the array, how to call the additional array data and how it's being changed.

    var slideIndex = [1,1];
    var slideId = ["mySlides1", "mySlides2"];
    showSlides(1, 0);
    showSlides(1, 1);
    
    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }
    
    function showSlides(n, no) {
      var i;
      var x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {slideIndex[no] = 1}    
      if (n < 1) {slideIndex[no] = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex[no]-1].style.display = "block";  
    }
    


  • @dkavan

    I will try to explain what is happening by commenting on the code.
    Also, I changed the name of x to slides. It made more sense.
    I hope this clears up some of the confusion.

    
    // Everything is broken up into two sets.
    // This is used to keep track which slide to currently show. The first one is for the first slide set and the second number is for the second slide set.
    // As you can tell both are initially set to the first slide for both sets. Note that 1 represents the first slide not 0.
    var slideIndex = [1, 1];
    // The class names for the slide sets.
    var slideId = ["mySlides1", "mySlides2"];
    // Call on showSlides which handles the logic for hiding all slides except for the initial one.
    // The first argument is a little confusing. I would think of it as to which slide we are currently showing.
    // The second argument is simple. Its the slide set #
    showSlides(1, 0);
    showSlides(1, 1);
    
    
    // This method is used to update the image that is currently show.
    // If you want to show the next slide simply 1 for n
    // If you want to show the previous slide simply provide -1
    // no is the slide set #
    function plusSlides(n, no) {
      // Here is the confusing part, slideIndex[no] += n
      // slideIndex[no] += n will update first then return the new updated value
      // remember slideIndex represents what slide to currently show
      // Here its saying to move the current index by n. So if n is -1 will go back a slide. If n is 1 it will move forward a slide.
      showSlides((slideIndex[no] += n), no);
    }
    
    // The method that will actually hide all images except for one
    function showSlides(n, no) {
    
      var i;
      // Get all slides for set # no
      var slides = document.getElementsByClassName(slideId[no]);
      // Time to update slideIndex?
      // is n greater than size of slide set e.g. 4 This happens when we reached the end of the slide set
      if (n > slides.length) {
        // Set it to the first slide again
        slideIndex[no] = 1;
      }
      // is n == 0. One way this will be true is when the user makes a left click before doing anything else.
      if (n < 1) {
        // set the current index to the last slide
        slideIndex[no] = slides.length;
      }
      // Hide all slide img elements
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      };
     // Reveal only one slide using slideIndex. Initially slideIndex is [1,1] so slide 1 for both sets 
     // Since arrays start at 0 not we have to subtract it by one
      slides[slideIndex[no] - 1].style.display = "block";
    }
    
    


  • @dkavan

    Do you mind sharing the markup (HTML) as well?



  • Here's the html markup for the slide show
    @avan

    <p>Slideshow 1:</p>
    <div class="slideshow-container">
      <div class="mySlides1">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      </div>
    
      <div class="mySlides1">
        <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
      </div>
    
      <div class="mySlides1">
        <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
      </div>
    
      <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
      <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
    </div>
    
    
    
    
    
    
    <p>Slideshow 2:</p>
    <div class="slideshow-container">
      <div class="mySlides2">
        <img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
      </div>
    
      <div class="mySlides2">
        <img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
      </div>
    
      <div class="mySlides2">
        <img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
      </div>
    
      <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
    </div>
    


  • @dkavan

    I will try to explain what is happening by commenting on the code.
    Also, I changed the name of x to slides. It made more sense.
    I hope this clears up some of the confusion.

    
    // Everything is broken up into two sets.
    // This is used to keep track which slide to currently show. The first one is for the first slide set and the second number is for the second slide set.
    // As you can tell both are initially set to the first slide for both sets. Note that 1 represents the first slide not 0.
    var slideIndex = [1, 1];
    // The class names for the slide sets.
    var slideId = ["mySlides1", "mySlides2"];
    // Call on showSlides which handles the logic for hiding all slides except for the initial one.
    // The first argument is a little confusing. I would think of it as to which slide we are currently showing.
    // The second argument is simple. Its the slide set #
    showSlides(1, 0);
    showSlides(1, 1);
    
    
    // This method is used to update the image that is currently show.
    // If you want to show the next slide simply 1 for n
    // If you want to show the previous slide simply provide -1
    // no is the slide set #
    function plusSlides(n, no) {
      // Here is the confusing part, slideIndex[no] += n
      // slideIndex[no] += n will update first then return the new updated value
      // remember slideIndex represents what slide to currently show
      // Here its saying to move the current index by n. So if n is -1 will go back a slide. If n is 1 it will move forward a slide.
      showSlides((slideIndex[no] += n), no);
    }
    
    // The method that will actually hide all images except for one
    function showSlides(n, no) {
    
      var i;
      // Get all slides for set # no
      var slides = document.getElementsByClassName(slideId[no]);
      // Time to update slideIndex?
      // is n greater than size of slide set e.g. 4 This happens when we reached the end of the slide set
      if (n > slides.length) {
        // Set it to the first slide again
        slideIndex[no] = 1;
      }
      // is n == 0. One way this will be true is when the user makes a left click before doing anything else.
      if (n < 1) {
        // set the current index to the last slide
        slideIndex[no] = slides.length;
      }
      // Hide all slide img elements
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      };
     // Reveal only one slide using slideIndex. Initially slideIndex is [1,1] so slide 1 for both sets 
     // Since arrays start at 0 not we have to subtract it by one
      slides[slideIndex[no] - 1].style.display = "block";
    }
    
    


  • @avan
    Thank you so much from the bottom of my heart. I guess confusion is a part of reading someone else code. I couldn't figure out how the function showSlides was grabbing the slideshow set data... you put it all together for me. I'll have to go back and learn arrays and how to select the data in them. Again..Thank you.