0

I have a problem with this code in my slider. I need to remove a class from all array elements. The length of the array may vary. this code works:

updateGallery() {
    this.carouselArray.forEach((el, i ) => {
        el.classList.remove('gallery-item-1');
        el.classList.remove('gallery-item-2');
        el.classList.remove('gallery-item-3');
        el.classList.remove('gallery-item-4');
        el.classList.remove('gallery-item-5');
    });
    let carouselSliceLength = this.carouselArray.slice().length;
    this.carouselArray.slice(0, carouselSliceLength).forEach((el, i) => {
        el.classList.add(`gallery-item-${i+1}`);
    });
}

but this code doesn't work:

updateGallery() {
    this.carouselArray.forEach((el, i ) => {
       el.classList.remove(`gallery-item-${i+1}`);
    });
    let carouselSliceLength = this.carouselArray.slice().length;
    this.carouselArray.slice(0, carouselSliceLength).forEach((el, i) => {
        el.classList.add(`gallery-item-${i+1}`);
    });
}

Why?

Daniel Stoyanoff
  • 1,443
  • 1
  • 9
  • 25
Blai
  • 13
  • 4
  • How about this `"gallery-item-" + $i`? – Markus Safar May 13 '21 at 12:04
  • `i` is the position of the element in the array. It's definitely not numbers 1-5. And even then you only have a single call to `.remove()` not five. – VLAZ May 13 '21 at 12:04
  • @MarkusSafar syntax error? – VLAZ May 13 '21 at 12:05
  • Useful links: [What is a debugger and how can it help me diagnose problems?](https://stackoverflow.com/q/25385173) and [How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) – VLAZ May 13 '21 at 12:06
  • 1
    Why don't you try to print `i` (using console.log) and see what it shows? – Nir Alfasi May 13 '21 at 12:06
  • 1
    Why are you calling `slice` so much? – Heretic Monkey May 13 '21 at 12:07
  • `this.carouselArray.slice().length` is going to be exactly the same a `this.carouselArray.length`, and it makes a needless new array that is immediately thrown away. – Pointy May 13 '21 at 12:07
  • The two pieces of code are certainly not equivalent. In the first you perform 5 removals in each iteration, and in the second you only perform one per iteration. Without seeing the HTML, it is not clear what needs to happen. – trincot May 13 '21 at 12:08
  • 1
    Please edit your question to include the HTML, JavaScript etc. to reproduce your problem IN your question. – Mark Schultheiss May 13 '21 at 12:10
  • @VLAZ: Thank you for your comment but please enlighten me. Beside the fact that I misunderstood the question, why would this be a syntactical error? As far as I see it we have a string, an integer and an add operator. To my understanding of the javascript language the integer will be casted to a string which leaves us with a string concatenation, right? – Markus Safar May 13 '21 at 14:26
  • @MarkusSafar the identifier `$i` does not exist. – VLAZ May 13 '21 at 14:27
  • @VLAZ It seems I should sleep a little bit more :D Thank's for the hint ;-) – Markus Safar May 14 '21 at 07:18

2 Answers2

1

Because you are doing different things. In the first implementation, you are removing five different elements for an element in the array (five calls of the remove function).

Whereas the second implementation calls only one remove for each element. So for the first element, it will remove gallery-item-1 for the second gallery-item-2 and etc.

Ayzrian
  • 2,279
  • 1
  • 7
  • 14
0

Ok, devs. I made loops in a loop and corrected the code. This code works. Deletes classes and adds new ones. The 3d slider works.

updateGallery() {
    const carouselLength = this.carouselArray.length
    this.carouselArray.forEach(el => {
        for (let i=1; i<=carouselLength; i++) {
            el.classList.remove(`gallery-item-${i}`);
        }
    });
    this.carouselArray.slice(0, carouselLength).forEach((el, i) => {
        el.classList.add(`gallery-item-${i+1}`);
    });
}

Thanks!

Blai
  • 13
  • 4