Search code examples
javascriptarrayscarousel

Javascript: Trying to pull multiple wildcard ids into a loop

I have a page that will have multiple tiny sliders on them and I am trying to pull multiple wildcard ids for slide controls into this loop.

 // Define all carousels.
  const carousel = document.querySelectorAll('.carousel-wrap');
  // Loop in case there are multiple on one page.
  (carousel).forEach(slider => {
  // See what the output is of the controls ids.
  console.log(document.querySelectorAll('[id^=controls-id]'))
      tns({
        container: slider,
        controlsContainer: document.querySelectorAll('[id^=controls-id]'),
      });
    }
  );

If I look at what the output of what document.querySelectorAll('[id^=controls-id]') is, it shows:

NodeList(2) [ul#controls-id-2.card__controls, ul#controls-id-11.card__controls]
0: ul#controls-id-2.card__controls
1: ul#controls-id-11.card__controls

so this looks correct, there are 2 carousels on the page with unique ids for the controls containers.

The issue is, when I do this bit:

controlsContainer: document.querySelectorAll('[id^=controls-id]'),

I get an error

Uncaught TypeError: Cannot read property '0' of undefined

I suspect it has something to do with the loop here and how I am trying to get the dynamic id of each control container into controlsContainer:

Maybe what I am trying to do is not possible. I am a newbie at Vanilla JS so I am sure I am missing something. Note, if I remove the custom controls container, multiple sliders on one page work as expected (with the default controls positioned above the slider.)

Solution

  • It seems like you are passing the values to the tns() wrong.
    Your provided docs @ github states that the type of controlsContainer has to be Node | String | false, but you are passing NodeList. To pass only one element, try selecting only one using querySelector():

    controlsContainer: document.querySelector('[id^=controls-id]')