first time implementing module pattern variable is undefined

Question

here is my code

    var s;
var AddEvent =  {
    settings : {
        saveButton : $('#uploadfiles1'),
        cancelSpeech :  $('.cancelSpeech'),
        datePicker : $(".datepicker"),
        eventName : $('input[name=eventname]'),
        eventDate : $('input[name=eventdate]')
    },
    init:function(s){
        s = this.settings;
        this.BindEvents();
        $('.Wallpapers').addClass('active');
        $('input, textarea').placeholder();
    },
    BindEvents:function(){
        this.CancelButton();
        this.DatePicker();
       // this.SaveButton();
        $('input[type=text],textarea').on('keyup change',function(){
            AddEvent.FieldsCheck(); 
        });
    },
    CancelButton: function()
    {
        s.cancelSpeech.on('click',function(){
            var referrer =  document.referrer;
            window.location = referrer;
        });
    },
    DatePicker :function()
    {
        s.datePicker.datepicker({
            //defaultDate: +7,
            showOtherMonths: true,
            autoSize: true,
            //appendText: '(dd-mm-yyyy)',
            dateFormat: 'dd/mm/yy'
        });
    },
    SaveButton: function()
    {
        this.ClearFields();
    },
    FieldsCheck: function()
    {
        alert(s.eventName.attr('name'));
        if(s.eventName.val()!='' && s.eventDate.val() !='' && $('textarea').val()!='')
        {
            s.saveButton.removeAttr('disabled').removeClass('disabled');
        }
        else
            s.saveButton.attr('disabled','disabled').addClass('disabled');
    },
    ClearFields:function()
    {
        $('input,textarea').val('');
        this.FieldsCheck();
    }
};
$(function(){
    AddEvent.init(s);
});

i am impletenting this example http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

but each time when i type in my input field at this line i get undefined in alert

alert(s.eventName.attr('name'));

please tell me what am i doing wrong i tried to search but couldnt find anything usefull.

edit: here i created a little jsfiddle i am getting

TypeError: this.settings is undefined
[Break On This Error]   

console.log(this.settings.eventName.attr('id'));

thanks

Answer 1

Your problem is here :

var s;
AddEvent.init(s);

There is no way after this to have s defined.

A solution would be to simply not pass s (and no declare it in the arguments of the function) :

init:function(s){
    s = this.settings;
...
AddEvent.init();

But that lets a variable polluting the global namespace.

If you want your settings to be accessed from all your functions, you could embed in in a closure :

var AddEvent =  (function(){
    var settings;
    return {
        init:function(){
                settings = {
                        saveButton : $('#uploadfiles1'),
                        cancelSpeech :  $('.cancelSpeech'),
                        datePicker : $(".datepicker"),
                        eventName : $('input[name=eventname]'),
                        eventDate : $('input[name=eventdate]')
                };
            this.BindEvents();
            $('.Wallpapers').addClass('active');
            $('input, textarea').placeholder();
        },
        BindEvents:function(){
            this.CancelButton();
            this.DatePicker();
           // this.SaveButton();
            $('input[type=text],textarea').on('keyup change',function(){
                AddEvent.FieldsCheck(); 
            });
        },
        CancelButton: function()
        {
            settings.cancelSpeech.on('click',function(){
                var referrer =  document.referrer;
                window.location = referrer;
            });
        },
        DatePicker :function()
        {
            settings.datePicker.datepicker({
                //defaultDate: +7,
                showOtherMonths: true,
                autoSize: true,
                //appendText: '(dd-mm-yyyy)',
                dateFormat: 'dd/mm/yy'
            });
        },
        SaveButton: function()
        {
            this.ClearFields();
        },
        FieldsCheck: function()
        {
            alert(settings.eventName.attr('name'));
            if(settings.eventName.val()!='' && settings.eventDate.val() !='' && $('textarea').val()!='')
            {
                settings.saveButton.removeAttr('disabled').removeClass('disabled');
            }
            else
                settings.saveButton.attr('disabled','disabled').addClass('disabled');
        },
        ClearFields:function()
        {
            $('input,textarea').val('');
            this.FieldsCheck();
        }
    }
})();

$(function(){
    AddEvent.init();
});