Instantiating JavaScript module pattern

javascript

Solution

Based on your comment, I think this is more like what you want:

MySlider = (function () {
    Slider = function (e) {
        this.e = e;
        // other per element/per slider specific stuff
    }

    ...

    var sliders; // define this out here so we know its local to the module not init

    return {
        init: function () {

            sliders = document.querySelectorAll('.my-slider');
            var l = sliders.length;

            for (var i = 0; i < l; i++) {
                sliders[i] = new Slider(sliders[i]); //except I'd use a different array

                slider = sliders[i];

                buildSlider(slider);
        }
    }
})();

This way, you are associating each element with it's own element specific data but you have a containing module within which you can operate on your collection of modules.

Problem

I'm trying to create multiple instances of a slider on a page. Each slider should know which slide it’s currently viewing. It seems that when I update the `slide` property, I change it for the class, and not the instance. This suggests to me that I'm not instantiating properly in my public `init()` function. Where am I going wrong? ``` var MySlider = (function() { 'use strict'; var animating = 0, slides = 0, // total slides slider = null, slide = 0, // current slide left = 0; function slideNext(e) { if ((slide === slides - 1) || animating) return; var slider = e.target.parentNode.children[0], x = parseFloat(slider.style.left); animate(slider, "left", "px", x, x - 960, 800); slide++; } return { init: function() { var sliders = document.querySelectorAll('.my-slider'), l = sliders.length; for (var i = 0; i < l; i++) { sliders[i] = MySlider; // I don't think this is correct. slider = sliders[i]; buildSlider(slider); } } } })(); ```

Original source