uncaught typeerror when using class getters on array elements-CodePudding

In my js file I have a class slideshow and an array slideshows which I fill with instances of the slideshow class. Later in my code I use a for loop, where I iterate over each element in slideshows and try to get a specific value from it. However, when trying to run my code I get the following error message:

Uncaught TypeError: slideshows[i].images[slideshows[i].shownImage] is undefined

My code looks like this:

let slideshows = [];

class slideshow{
    constructor(images){
        this._images = images;
        this._shownImage = 0;
    }

    get images() {return this._images;}
    get shownImage() {return this._shownImage;}

    set images(images) {this._images = images;}
    set shownImage(shownImage) {this._shownImage = shownImage;}
}

// This function is called when the page has loaded in
function setupSlideshow(){
    // Create Array of all slideshows
    slideshowDivs = document.querySelectorAll("div.slideshow");
    for(i = 0; i < slideshowDivs.length; i  ){
        slideshows.push(new slideshow(slideshowDivs[i].querySelectorAll("slideshow-image")));
    }

    // Show Active Image
    for(i = 0; i < slideshows.length; i  ){
        slideshows[i].images[slideshows[i].shownImage].style.display = 'block';
        // The line above this one triggers the error
    }
}

I believe the syntax isn't the problem, although I don't have a lot of experience with js classes. The only thing I can think of that could be the problem is that js doesn't know that slideshows[i] is of class slideshow and thus doesn't look at the functions I declared in my class.

CodePudding user response：

slideshows[i].shownImage should be of type int, otherwise it can't be referenced as an index in slideshows[i].images. I'm not saying it's not an int, just make sure it is. AND: I know that you don't define types in JavaScript. But if you imply that it's a String or something, it can't act like a String and int both.

Second, slideshows =... should be slideshows.push(... which implies that slideshows is an array and treats it accordingly.

Third, slideshows is never defined. You should say var slideshows = []. This is the root of it, I'd say, unless you defined it elsewhere in code not shown here. If you did define it elsewhere, then the problem would probably be that you didn't push to it as should be done for an array.

Edit: it is defined now, fixed by OP. Edit: # 2 is fixed now.

CodePudding user response：

I believe the answer is on a different path than the one I was pursuing, hence the new answer.

It must be that there is no image at slideshows[i].shownImage. I would expect that this would cause an index out of bounds exception, not what you got, but can you see how if slideshowDivs[i].querySelectorAll("slideshow-image") returns nothing, then the slideshow will be created with no images, and therefore when you query an index in the images, it finds nothing? I think that's the problem.

Therefore, you should have a conditional statement, an if statement, that says

if (slideshowDivs[i].querySelectorAll("slideshow-image")) != null){
      slideshows.push(new slideshow(slideshowDivs[i].querySelectorAll("slideshow-image")));
}