Question

I would like to assign document elements to global variables so that I am able to use these elements everywhere in my code.

My code:

// document elements
var drop = null;
var status = null;
var show = null;

function process (drop, status, show) {
    if (document.readyState == 'complete') {
        // init elements
        drop = document.getElementById(drop);
        status = document.getElementById(status);
        show = document.getElementById(show);
    }

    // init event handlers
    drop.addEventListener('drop', handleDrop, false);
}

function handleDrop (evt) {
    // do something
}

The problem is I can’t do anything with the document elements using the global variables in the function handleDrop while in the function process everything works as it should…

EDIT: For example, I can read the content of the element show (show.innerHTML) in the function process but not in the function handleDrop.

Answer 1

The problem is that all these drop, status… variables within process function are the local ones – they refer to its arguments, and not the variables defined earlier.

If these were defined at the outer-most level (i.e., not within any function’s body), you can access (and alter) them like this:

window.drop = document.getElementById(drop);
window.status = document.getElementById(status);
window.show = document.getElementById(show);

But I’d actually suggest another way: using separate names for params and ‘closured-over’ variables. Like this:

function process(dropId, statusId, showId) {
    if (document.readyState == 'complete') {
        // init elements
        drop = document.getElementById(dropId);
        status = document.getElementById(statusId);
        show = document.getElementById(showId);
    }
}

Both ways allow you to address these variables within handleDrop function; the latter one is obviously superior, because you are not restricted with what scope to choose.