Problem with passing a parameter in JavaScript

Question

I've got a full page lightbox with a slideshow gallery and I am trying to refactor my code so I will not have to use a global variable. I'm straggling with passing a variable as a parameter from function to function. It all works well when I open the lightbox gallery: the correct image is seen and the number in the counter is shown. The problem starts when I want to switch to next or previous image. I can't access the variable which stores or stored the current image seen when the lightbox was open. I'm posting my simplified code without variables' declarations.

// This is a function which opens the lightbox with the galery after clicking on a thumbnail image.
function openSlideshowLightbox (event, currentSlide) {
  for (const [currentThumbnailImg] of thumbnailImgs.entries()) {
    if (event.target === thumbnailImgs[currentThumbnailImg]) {
      showCurrentSlide(currentSlide = currentThumbnailImg) 
    }
  }
} 

// This function shows the current slide containing an image
function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
}

All above is one action, the lightbox gets open and the functions finish their tasks.

Now I want to switch to next or previous image but I don't have access to currentSlide variable anymore which I need in the below function.

function navigateSlideshowLightbox (event, currentSlide) {
  if (previousImgIconClicked) {
    currentSlide = (currentSlide - 1 + allSlides) % allSlides
    showCurrentSlide(currentSlide)
  } else if (nextImgIconClicked) {
    currentSlide = (currentSlide + 1) % allSlides
    showCurrentSlide(currentSlide)
  }
}

I tried to use return statement in showCurrentSlide():

return currentSlide

and then in navigateSlideshowLightbox():

currentSlide = showCurrentSlide()

but currentSlide is undefiend.

Note that since you are declaring currentSlide as a parameter inside your functions, any global variables you have named currentSlide will not be recognized within those functions, nor will setting currentSlide have any effect on the global variable. — Heretic Monkey
– Heretic Monkey, Commented Jun 2, 2021 at 13:18

Ludolfyn · Accepted Answer · 2021-06-02 13:21:04Z

2

currentSlide = showCurrentSlide() will always return undefined if you don't pass an argument to the showCurrentSlide() function, even if you add a return statement. You need to either pass an argument there e.g. currentSlide = showCurrentSlide(theSlide). Or you can do the following as a quick and easy solution.

In the following function, since you're already using the slides object, just add the current slide to the slides object at the end, for later:

function showCurrentSlide (currentSlide) {
    for (const slide of slides) {
        if (slide.classList.contains('slide_visible')) {
            slide.classList.remove('slide_visible')
            slide.classList.add('slide_hidden')
        } else {
            slide.classList.add('slide_hidden')
        }
    }
    slides[currentSlide].classList.remove('slide_hidden')
    slides[currentSlide].classList.add('slide_visible')
    slides.lastActiveSlide = currentSlide // Adding it here
}

Then whe you run the navigateSlideshowLightbox() function you can just reach for that object property instead of relying on the paramater.

function navigateSlideshowLightbox (event) {
    if (previousImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide - 1 + allSlides) % allSlides
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide + 1) % allSlides
        showCurrentSlide(currentSlide)
    }
}

answered Jun 2, 2021 at 13:21

Ludolfyn

2,10217 silver badges23 bronze badges

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

2 Comments

yendrrek Over a year ago

You can't re-declare a const.

yendrrek Over a year ago

Oh, yes, of course. I declared currentSlide with let on top of the function and then just redeclared it depending on the condition. Anyway, thanks for your help.

Peter Pointer · Accepted Answer · 2021-06-02 13:04:13Z

1

(this should really be a comment instead, but running out of space for questions there)

The statement currentSlide = showCurrentSlide() probably does nothing because showCurrentSlide() does not return a value. Return the value:

function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
  
  return currentSlide;
}

Your function navigateSlideshowLightbox() should also return currentSlide, since it is modifying it, correct?
Your written description says you tried to use return but it didn't work - post your code as you have it, not as you want it to work.

Another curiosity:

showCurrentSlide(currentSlide = currentThumbnailImg)

I would rather write this as two lines.

currentSlide = currentThumbnailImg;
showCurrentSlide(currentSlide);

In your current code you don't need the result so why not supply that value directly?

showCurrentSlide(currentThumbnailImg);

edited Jun 2, 2021 at 13:04

answered Jun 2, 2021 at 12:54

Peter Pointer

4,2542 gold badges21 silver badges40 bronze badges

1 Comment

yendrrek Over a year ago

Yes, I think it's better to write it like you suggested, on two separate lines currentSlide = currentThumbnailImg; showCurrentSlide(currentSlide); I wont need currentSlide as a parameter in openSlideshowLightbox() and can simply declare it let currentSlide.

yendrrek · Accepted Answer · 2021-06-02 15:46:51Z

No need to use a parameter really. As navigateSlideshowLightbox() performs a separate task from openSlideshowLightbox(), I iterate over all the slides within navigateSlideshowLightbox() and by checking which slide is currently seen I get the needed index position of the slide which I then assign to currentSlide variable.

function navigateSlideshowLightbox () {
    if (previousImgIconClicked) {
        for (const [slideVisible] of slides.entries()) {
          if (slides[slideVisible].classList.contains('slide_visible')) {
            currentSlide = (slideVisible - 1 + allSlides) % allSlides
          }
        }
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        //  Here comes the same 'for' loop with if statement as above.
        currentSlide = (slideVisible + 1) % allSlides
        showCurrentSlide(currentSlide)
    }

Collectives™ on Stack Overflow

Problem with passing a parameter in JavaScript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related