Question

I have a carousel object, with images and a pager. The problem is I can’t set the onClick to the pager. I’m obviously missing something here but I don’t know what.

The error when I click in a pager item is:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'scrollCarouselTo'

I set my onclick

    carouselDots.on('click',function(){  
        this.scrollCarouselTo(1,5);   // <-- problem lies here, how can i call this method?
    });

and the scrollTo method

this.scrollCarouselTo=function(dotIndex, numDots)
    {       
        //H_SCROLL.scrollToElement("#carouselItem"+dotIndex, 300);
        H_SCROLL.scrollToPage(dotIndex, 0 , 300);
        this.highlightCarouselDot(dotIndex, numDots);
    }

Last, on my HTML file this is how I set it:

var tempCarousel = new Carousel();
tempCarousel.initialize(params,cont,scrollContainer);

My Carousel class: (parts of it that i think are relevant)

function Carousel() {

var container;
var pager;
var opt;
var thisCarousel;

//render the correct number of dots and highlight the indexed one
this.highlightCarouselDot=function(dotIndex, numDots)
    {       
        var ui_str="";
        console.log("numDots" + numDots);
        for (var i=0;i<numDots;i++)
        {
            if (i==dotIndex)
                ui_str+='<div class="carouselDot selected" id="carouselDot'+i+'"></div>';
            else
                ui_str+='<div class="carouselDot" id="carouselDot'+i+'"></div>';
        }

        console.log(ui_str);
        console.log(pager);
        pager.html(ui_str);

        var carouselDots = $(pager.selector + " .carouselDot");
        var dotSelected = $(pager.selector + " .selected");
        carouselDots.css('background',opt.pagerImage);
        carouselDots.width(opt.pagerSize);
        carouselDots.height(opt.pagerSize);
        carouselDots.on('click',function(){  //replace with touch
            this.scrollCarouselTo(0,5);
        });
        dotSelected.css('background',opt.pagerSelectedImage);

    }

    this.scrollCarouselTo=function(dotIndex, numDots)
    {       
        //H_SCROLL.scrollToElement("#carouselItem"+dotIndex, 300);
        H_SCROLL.scrollToPage(dotIndex, 0 , 300);
        this.highlightCarouselDot(dotIndex, numDots);
    }

}

Thank you!

Answer 1

You are having trouble understanding where the scope is changing in your code. Yes this refers to the object you are in, but when you assign an event handler such as onclick, that function is run in the scope of the UI element that was clicked. This means that in your onclick code, this refers to the html object that was clicked, and not the highlightCarouselDot object.

One common solution to this problem is to use an extra variable to store the value of this.

var self = this;

at the start of your object, that way you can refer to self within your event handlers when you want to refer to the outside object.