What this code means?

JavaScript
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);
}
1 Like
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

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

11

thanks alot super useful help thanks

12

what does this mean or of which syntax is this??
showSlides(slideIndex);

13

Not sure what you are asking, it’s a function being called. To see the function definition you can look at the code from the link to w3schools in the initial post.

14

Hi @Huraira!

Welcome to the forum!

Please do not respond to posts that have not been active for over a year. It is best to create your own topic and people will be glad to assist your there.
Thanks!

1 Like