What this code means?

What this code means?
0
#1

Hello I’m having a hard time trying to understand this piece of code right here, I took it from this tutorial in w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow Could be somebody willing to explain it to me in the most simple way possible please, thanks guys

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}
#2

Which part do you not understand?

#3

Honestly all, but specially the n part, what it means and what value it has? why for the functions plusSlides and currentSlide slideIndex
has += n in the first function and only =n in the last one, thanks.

#4

The plusSlides function is called on the arrows to the left and right of the picture. When clicking on these arrows, it moves the picture one to the left or one to the right.

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

The currentSlide function is called on the dots beneath the picture. Clicking on the dots moves to a specific slide.

<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span>

With both functions above, the n is passed into those functions through the inline javascript in the html (the onclick attributes). The slideIndex variable is a marker for which picture is currently being shown (when slideIndex is one, show the first picture. When slideIndex is two, show the second, etc.).
Also, here’s those functions rewritten below to be more clear, they do the exact same thing.

// function triggered by arrows on left and right of picture
function plusSlides(n) {
  slideIndex = slideIndex + n;
  showSlides(slideIndex);
}

// function triggered by dots beneath picture
function currentSlide(n) {
  slideIndex = n;
  showSlides(slideIndex);
}

The final showSlides function is what actually changes the css to show/hide picture slides. It finds all the slide divs and puts it into an array with this line:
var slides = document.getElementsByClassName("mySlides");
It hides them all with the first for loop by setting their css display property to none.
Then, it takes the slideIndex, uses that index to find the correct slide in the slides array, and sets its css display property to block (which makes the image appear):
slides[slideIndex-1].style.display = "block";
There’s also some other things this function does, like making sure slideIndex is between 1 and 3, changing the dot css and so on.

To be fair, this isn’t the best code, and the way they use n and slideIndex in the showSlides function is kinda confusing. I hope this helps somewhat though.

#5

Two more notes:

  1. Normally you don’t wanna switch from 0-base to 1-base index system when you work with arrays - it hurts eyes a bit :slight_smile:
  2. There is easier way to infinitely loop through array: array[n % array.length]
#6

Wow thanks for your help and yes a think is very confusing and more for beginners, but in your opinion how could be the simplest way to do the javascript part without dealing with the confusing parts like the n and slideIndex parts? Thanks for your answer was super handy…

#7

Thanks alot for your comment

#8

@iiiked How would this be used in an example? I understand if you were always incrementing n (assuming n is the index of the current slide), but if you were to decrease n from 0, wouldn’t this break? Maybe I am missing something.

EDIT: I was able to figure something out by using your array[n % array.length]. I approached the slider a little differently, but seems to work the same. I am sure it could be improved.

const Slider = function(imagesArr) {
  let currIndex = 0;

  this.move = direction => {
    const nextIndex = direction === 'left' ? -1 : 1;
    currIndex += nextIndex;
    this.getNextSlide();
  };

  this.getNextSlide = () => {
    this.showImage(
      imagesArr[currIndex % imagesArr.length] || imagesArr[imagesArr.length - 1]
    );
  };

  this.showImage = (currImage = imagesArr[currIndex]) => {
    console.log(currImage);
  }
};

const images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg'];
const slider1 = new Slider(images);
slider1.showImage(); // a.jpg
slider1.move('right'); // b.jpg
slider1.move('right'); // c.jpg
slider1.move('right'); // d.jpg
slider1.move('right'); // a.jpg
slider1.move('left'); // d.jpg
slider1.move('left'); // c.jpg
slider1.move('left'); // b.jpg
slider1.move('left'); // a.jpg
1 Like
#9

Oh wow! I didn’t know about this bug! In math -1 mod 3 equals to 2 but it looks like JavaScript has it’s own math :smiley:

More about bug and the fix here:
https://web.archive.org/web/20090717035140if_/javascript.about.com/od/problemsolving/a/modulobug.htm

#10

Yeah, JavaScript has some differences than languages like Python. Technically, that is why % is referred to as the remainder operator and not the modulus operator.

#11

thanks alot super useful help thanks