0

I am making an image slideshow in JavaScript and to better understand the code, I changed the parameter of function slideshow(n) to function slideshow(slideIndex), but noticed it didn't work, can you please help me figure out what is the difference between these two parameters of the function, and why the second parameter in function slideshow(slideIndex) doesn't work?

var slideIndex = 1;

slideshow(slideIndex);

function nextPrev(n){
    slideshow(slideIndex += n);
}

function slideshow(slideIndex){  

    // why "function slideshow(slideIndex)" stops executing after some 
    // slides, however function slideshow(n) works properly here?

    var x = document.getElementsByClassName("slide");
    var dot = document.getElementsByClassName("dot");
    if(slideIndex > x.length) slideIndex = 1;
    if(slideIndex < 1) slideIndex = x.length;
    for(var i=0; i < dot.length; i++){
        dot[i].className = dot[i].className.replace(" active", "");
    }
    for(var i = 0 ; i < x.length; i++){
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    dot[slideIndex-1].className += " active";
}
Improve this question
4
  • 1
    what was the initial value of n Commented Sep 20, 2018 at 15:34
  • 1
    My guess is that the problem comes from somewhere else Commented Sep 20, 2018 at 15:36
  • 2
    Please define "doesn't work". Commented Sep 20, 2018 at 15:42
  • The value of " n " is based on "nextPrev(-1)" to go to previous slide and "nextPrev(1)" to go to next slide. Commented Sep 20, 2018 at 16:09

1 Answer 1

Reset to default
2

A parameter variable is always a local variable. So when you use slideIndex as the parameter variable, it shadows the global variable with the same name.

As a result, when you do:

if(slideIndex > x.length) slideIndex = 1;
if(slideIndex < 1) slideIndex = x.length;

it only affects the local variable, not the global variable, so these changes don't persist when the function returns.

If the function is going to update the global variable, there's really no good reason for it to take the index as a parameter. 

function nextPrev(n) {
  slideIndex += n;
  slideshow();
}

function slideshow() {
  var x = document.getElementsByClassName("slide");
  var dot = document.getElementsByClassName("dot");
  if (slideIndex > x.length) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = x.length;
  }
  for (var i = 0; i < dot.length; i++) {
    dot[i].className = dot[i].className.replace(" active", "");
  }
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  dot[slideIndex - 1].className += " active";
}

Alternately, you could put the code that checks slideIndex against the array limits in the caller, and have slideshow() simply display the slide without also updating slideIndex.

function nextPrev(n) {
  var slideCount = document.getElementsByClassName("slide").length;
  slideIndex += n;
  if (slideIndex > slideCount) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = slideCount;
  }
  slideshow(slideIndex);
}

function slideshow(slideIndex) {

  var x = document.getElementsByClassName("slide");
  var dot = document.getElementsByClassName("dot");
  for (var i = 0; i < dot.length; i++) {
    dot[i].className = dot[i].className.replace(" active", "");
  }
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  dot[slideIndex - 1].className += " active";
}

Also, rather than subtracting 1 when using slideIndex as the array index, you should just set its values to the range 0 to length-1 rather than 1 to length. Get used to counting from 0 when dealing with array indexes.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Meaning: remove slideIndex from the function(slideIndex)
If the function is going to update .... can you please explain this paragraph. I am new in programming and this paragraph seems complicated. Please explain it!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.