CODEWITHSUNDEEP
javascriptangularjs
JohnRobertPett
JohnRobertPett

Reputation: 1183

Variable as index in Javascript/Angular

I am trying to get the total size of my array to be the index of one part of an image carousel I am making. Each time I try to do this, the variable set get the length of the array doesn't seem to work.

These are my images:

var carouselImages = [
    {
        url : 'images/carousel/carousel1.jpg'
    },
    {
        url: 'images/carousel/carousel2.jpg'
    },
    {
        url: 'images/carousel/carousel3.jpg'
    },
    {
        url: 'images/carousel/carousel4.jpg'
    },
    {
        url: 'images/carousel/carousel5.jpg'
    },
    {
        url: 'images/carousel/carousel6.jpg'
    },
    {
        url: 'images/carousel/carousel7.jpg'
    },
    {
        url: 'images/carousel/carousel8.jpg'
    },
    {
        url: 'images/carousel/carousel9.jpg'
    }
];

This is my total images variable, that console logs the number fine:

var totalImages =  carouselImages.length;

Then these are my three divs:

// SET PREVIOUS CAROUSEL IMAGE
$scope.prevImage = {
    'background-image' : 'url(' + carouselImages[totalImages].url + ')'
};

$scope.isPrevActive = false;

// SET CURRENT CAROUSEL IMAGE
$scope.currentImage = {
    'background-image' : 'url(' + carouselImages[0].url + ')'
};

$scope.isCurrentActive = true;

// SET NEXT CAROUSEL IMAGE
$scope.nextImage = {
    'background-image' : 'url(' + carouselImages[1].url + ')'
};

The console says that it 'cannot read url of undefined', but the url is defined in the array. Please help!

Upvotes: 0

Views: 122

Answers (1)

bfavaretto
bfavaretto

Reputation: 71918

totalImages is out of range. The last index in the array is totalImages - 1:

// SET PREVIOUS CAROUSEL IMAGE
$scope.prevImage = {
    'background-image' : 'url(' + carouselImages[totalImages - 1].url + ')'
};

Upvotes: 3

Related Questions