Caching a JS selector then only using it once I have this code:

var submit = document.getElementById('submit');
var error = document.getElementById('error');
var url;

submit.onclick = function(){
    url = document.getElementById('url').value;
    if(url == ''){
        error.style.display = 'block';
        return false;
    }   
};


Now, it's very simple in functionality. But I'm wondering if caching the error selector, for example, is worth caching or not? is it a perf hit to cache a selector if its only accessed once?
My general rule of thumb is to cache a selector lookup within a given function so you only look it up once for each function invocation, but to not cache it globally.

If something was being called hundreds or thousands of times in a loop, you would want to cache it outside the loop just for common sense efficiency.

Caching things globally is pretty much never needed for user event types of things because the performance of looking up a few objects in the DOM is super fast when compared to any sort of user action time.  In other words, you wouldn't be able to tell the difference so you might as well go with the most maintainable and reliable code which avoids unnecessary globals.