How to put JavaScript DOM elements in object and access them?

Question

I would like to place all of JavaScript DOM element queries in an object and access them throughout my script. Here's the current design pattern I'm using and I would like to stick to this format if possible:

(function ($) {

EXAMPLE = {

    basicExample : function () {

        config : {
            logo : $('#logo'),
            footer : $('footer'),
        },

        EXAMPLE.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
}

EXAMPLE.basicExample();

})(jQuery);

Accessing the logo DOM element doesn't seem to work like this: EXAMPLE.config.logo

config isn't a property of EXAMPLE. It's not even a property or variable of basicExample - it's a label (you used : instead of =). — Ian
– Ian, Commented May 21, 2013 at 17:49

Bergi · Accepted Answer · 2013-05-21 18:04:37Z

4

You did misplace the config part - not in your EXAMPLE object literal, but inside your basicExample function (where it acted as a labelled block statement with no-op expression statements inside, so it threw no error). Instead, it should be

(function ($) {
    EXAMPLE = {
        config : {
            logo : $('#logo'),
            footer : $('footer'),
        },
        basicExample : function () {
            EXAMPLE.config.logo.hover(function () {
                $(this).addClass('example');
            }, function () {
                $(this).removeClass('example');
            });
        }
    };
    EXAMPLE.basicExample();
})(jQuery);

However, you will need to place the initialisation into a DOM-ready handler, otherwise it might not find the elements. So either use

EXAMPLE = {
    init : function($) {
        EXAMPLE.config = {
            logo : $('#logo'),
            footer : $('footer'),
        };
        EXAMPLE.basicExample();
    },
    basicExample : function() {
        this.config.logo.hover(function () {
            jQuery(this).addClass('example');
        }, function () {
            jQuery(this).removeClass('example');
        });
    }
};
jQuery(EXAMPLE.init);

or just put everything in the handler, without any module pattern and extra basicExample function:

jQuery(function ($) {
    var config = {
        logo : $('#logo'),
        footer : $('footer'),
    };
    config.logo.hover(function () {
        $(this).addClass('example');
    }, function () {
        $(this).removeClass('example');
    });
});

edited May 21, 2013 at 18:04

answered May 21, 2013 at 17:50

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

1 Comment

Dory Zidon Over a year ago

could also work, just not sure if that's what he ment, or was just using EXAMPLE as a namespace..one or the other ;)

Dory Zidon · Accepted Answer · 2013-05-21 17:47:53Z

1

You are using object literal notation to define an object, and inside that object you define a constructor function, that needs to be used via new to be useful..I believe what you wanted is to create a namespace with a single object inside it.

try to remove the function and you should be able to access it, hence:

var EXAMPLE = {
   basicExample : {
     config : {
         logo : $('#logo')
     }
  }
}

answered May 21, 2013 at 17:47

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

Comments

Artyom Neustroev · Accepted Answer · 2013-05-21 17:57:34Z

1

I would suggest declare a global object like this:

EXAMPLE = {
    basicExample: function () {
        this.config = {
            logo: $('#logo'),
            footer: $('footer')
        };
        return this;
    },
    applyHover: function () {
        this.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
    }
};

And then call a .basicExample().applyHover() on document ready.
FIDDLE EXAMPLE

answered May 21, 2013 at 17:57

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Comments

carsol · Accepted Answer · 2013-05-21 17:48:02Z

0

You have a comma at the end of the config.

config : {
            logo : $('#logo'),
            footer : $('footer'),
        },

Should be:

config : {
            logo : $('#logo'),
            footer : $('footer')
        },

answered May 21, 2013 at 17:48

carsol

3531 silver badge6 bronze badges

4 Comments

A. Wolff Over a year ago

Since the official death of IE7, extra comma shouldn't be a problem anymore

Ian Over a year ago

@roasted Sorry, no official death of IE7

user400654 Over a year ago

IE7 ships with windows XP, it will never die! though this answer should have probably been a comment, but he doesn't have the rep (yet).

Ian Over a year ago

@roasted Yeah seriously...I'm tired of "having to support it"

Community · Accepted Answer · 2017-05-23 12:28:56Z

-1

You can do it like this:

var EXAMPLE = {
   basicExample : {
     config : {
         logo : $('#logo')
     }
  }
}
EXAMPLE.basicExample.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });

JsFiddle

Or you can do what Artyom suggested.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered May 21, 2013 at 18:00

Hanna

10.9k11 gold badges60 silver badges91 bronze badges

1 Comment

Bergi Over a year ago

Why not use the hover method like OP did?

km6zla · Accepted Answer · 2013-05-21 18:05:24Z

-2

EXAMPLE.basicExample is a function this is wrapping your config parameter. That is why it is not available to EXAMPLE.config. If you want the function EXAMPLE.basicEXAMPLE to define config as an element of EXAMPLE then do this:

EXAMPLE = {

    basicExample : function () {

        EXAMPLE.config = {
            logo : $('#logo'),
            footer : $('footer'),
        },

        EXAMPLE.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
    }
}

edited May 21, 2013 at 18:05

answered May 21, 2013 at 17:49

km6zla

4,9272 gold badges32 silver badges53 bronze badges

4 Comments

km6zla Over a year ago

Why the downvote? I even tested this and it works and answers the question.

Bergi Over a year ago

No, it does not work. It still has the same mistake (not my downvote, though).

Hanna Over a year ago

Yeah, I tested this as well and it does not work (also not my downvote)

km6zla Over a year ago

Ok it was a typo missing = in place of the :. But the key was that it declares EXAMPLE.config instead of config. And it works.

Collectives™ on Stack Overflow

How to put JavaScript DOM elements in object and access them?

6 Answers 6

1 Comment

Comments

Comments

4 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

4 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related