Javascript Custom Library

Question

I'm having trouble figuring out why the following is not working:

My custom JS library

(function ($, undefined) {

var expenses = expenses || {};

expenses.report = function () {

    var deleteReport = function () {
        alert('test');
    };

    return {
        deleteReport: deleteReport
    };
};

window.expenses = expenses;

})(jQuery);

How I am calling it on the page:

$(function() { expenses.report.deleteReport() };

The error:

Uncaught TypeError: Object function () {



        var deleteReport = function () {

            alert('test');

        };



        return {

            deleteReport: deleteReport

        };

    } has no method 'deleteReport'

I'm still familiarizing myself with javascript and jquery so I'm sure there is something simple in the design that I am leaving out. I just can't figure out what it is.

Wow, this is Javascript run amok, way more obscure than needed. — jfriend00
– jfriend00, Commented Nov 4, 2011 at 21:02

robbrit · Accepted Answer · 2011-11-04 19:52:39Z

3

expenses.report

is a function.

expenses.report()

is the return value of that function, which is the object you defined here:

{
    deleteReport: deleteReport
};

So if you want to call deleteReport, you need to go like this:

expenses.report().deleteReport()

answered Nov 4, 2011 at 19:52

robbrit

18k4 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Lonowski · Accepted Answer · 2011-11-04 19:59:01Z

2

Currently, expenses.report is a function, which returns an object with a deleteReport method:

expenses.report().deleteReport();

If you instead wanted expenses.report.deleteReport(), you have a few options:

1) Change the function to auto-execute and return the object right away.

expenses.report = (function () {
    var deleteReport = function () {
        alert('test');
    };

    return {
        deleteReport: deleteReport
    };
})();

2) Set the object and function directly if you don't really need the closure or deleteReport as a separate variable.

expenses.report = {
    deleteReport: function () {
        alert('test');
    }
};

answered Nov 4, 2011 at 19:59

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Comments

seanh · Accepted Answer · 2011-11-04 19:58:40Z

1

expenses.report is a function that returns an object when executed. Since it is never executed, the object containing deleteReport does not exist. I would make your expenses.report function self invoking, ie:

expenses.report = (function () {

    var deleteReport = function () {
        alert('test');
    };

    return {
        deleteReport: deleteReport
    };
})();

now you will be able to call expenses.report.deleteReport()

answered Nov 4, 2011 at 19:58

seanh

2141 silver badge7 bronze badges

Collectives™ on Stack Overflow

Javascript Custom Library

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related