Question

Base

• I would like to use some variables that are set from another function within an object
• One function, onUpdate: waits for a call to be made from somewhere else in the application
• Second function, onRelease: triggers after a mouse click

What I am trying to achieve

There are some DOM elements I need to use for both functions. However, a document.onload won’t work here, so I am thinking that I’ll need to store them in some sort of JavaScript object.

Restrictions

(Elements are only used in this Object and must be declared inside the Object)

---

note: This is a custom built app so it may seem a bit confusing, but I only need to know if this can be done in the current situation

---

QUESTION

Is there any way to use Javascript Objects or some sort of function that stores/gets the DOM elements so they are usable throughout an Object?

Code

var ObjB = exports.ObjB = ObjA.extend({

    /* Something to contain the DOM Elements E.g.
     UI = {
         domElement: document.querySelector('#dom')
     }, 
    */ 

    onUpdate: function() {
        if(domElement.hasClass('class')) { 
            // logic using other elements
        }
    },

    onRelease: function() {
        if(domElement.hasClass('class')) { 
            // logic using other elements  
        }
    }

});

Answer 1

If you would like to use the dom element more then once, and you would like to avoid to call the selector everytime you want to use the element you could do it this way, but be award that this will only work if you dont remove or add the required elements later (after you called this.setupUi() the first time), because UI will only be initialized once:

var ObjB = exports.ObjB = ObjA.extend({

    onUpdate: function() {
        this.setupUi();

        if(this.UI.domElement.hasClass('class')) { 
            // logic using other elements
        }
    },

    onRelease: function() {

        this.setupUi();

        if(this.UI.domElement.hasClass('class')) { 
            // logic using other elements  
        }
    },

    setupUi : function() {
        if( !this.UI ) {
           this.UI = {};
           this.UI.domElement =  document.querySelector('#dom');
           //add all other elements that are required by the object
        }

    }

});