Module Pattern: function undefined

Question

I'm trying to emulate the module pattern found here: https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

Here is my code:

var RPSLS_UI = {
settings: {
    playerSelections: $(".card")
},

init: function() {
    this.bindUIActions();
},

bindUIActions: function() {
    this.settings.playerSelections.on("click", function() {
        console.log($(this));
    });
}
};

I have included the dependencies in my HTML in this order:

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="assets/js/rpsls-ui-1.0.js"></script> <script type="text/javascript" src="assets/js/index.js"></script>

When I load my HTML, I type in console:

RPSLS_UI.init();

Results in:

undefined

Then I type in:

RPSLS_UI.init;

Results in:

function () { this.bindUIActions(); }

What is happening here? Why is the init() function undefined?

Paul · Accepted Answer · 2016-04-13 05:37:17Z

1

The function isn't undefined. It returns undefined because there is no return statement. If you want it to return something you could add a return statement to it:

init: function() {
    this.bindUIActions();
    return 'Hi!';
}

It doesn't seem like it is necessary for it to return anything, as it calls another function that binds a click handler to your DOM. The function has side effects, but doesn't return anything.

answered Apr 13, 2016 at 5:37

Paul

142k28 gold badges285 silver badges272 bronze badges

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

3 Comments

iparke Over a year ago

Thanks! That makes sense! I was really confused because my click event never fires off. I guess that's a separate question now.

Paul Over a year ago

@iparke Are there any errors in your console? My first guess is that you are including that script in the DOM before any elements with the class card exist. The expression $(".card") needs to run after the elements exist (IE. put the script right before your closing </body> tag, or anywhere else as long as it's after all the cards in your DOM). You could always check RPSLS_UI.settings.playerSelections.length to see how many elements matched the selector

iparke Over a year ago

2 for 2. Thank you so much.

Collectives™ on Stack Overflow

Module Pattern: function undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related