Why does assigning a function (which belongs to an object) to a variable behave this way?

Question

I have this webpage where I have to use a lot of document.getElementById's. Since I am lazy, I thought of saving a few bytes by assigning document.getElementById to a shorter variable:

var geid = document.getElementById;

However, this did not work as I intended. It gave me the following error:

Uncaught TypeError: Illegal invocation

Consider the following snippet which demonstrates my problem:

var foo = document.getElementById('foo');
console.log(foo); // outputs: '<div id="foo">Foo</div>'

var geid = document.getElementById;
var foo_geid = geid('foo'); // Aaaaaargh! Uncaught TypeError: Illegal invocation
console.log(foo_geid);

<div id="foo">Foo</div>

So what am I doing wrong? Why cannot I do what I did?

^{I checked "How does the "this" keyword work?", because I am having a hunch that this has to do something with all this. (It feels to me like getElementById got somehow detached from document object). But I cannot really pinpoint and articulate the problem. Can anyone help me?}

Duplicate of [https://stackoverflow.com/questions/41757990/can-i-assign-document-getelementbyid-to-variable-in-javascript](https://stackoverflow.com/questions/41757990/can-i-assign-document-getelementbyid-to-variable-in-javascript) — Kevin Schreuder, Sep 18 '17 at 11:36
Maybe you should have considered Googling the error message. [This seems to explain the problem](https://stackoverflow.com/questions/9677985/uncaught-typeerror-illegal-invocation-in-chrome) — musefan, Sep 18 '17 at 11:36
@musefan: Sorry I did not Google it really. Because I *knew* the answer. I came across https://stackoverflow.com/questions/9677985/uncaught-typeerror-illegal-invocation-in-chrome, but it did not have the answer I was looking for. I was looking for an answer that explain JavaScript's execution context. — sampathsris, Sep 18 '17 at 11:40

score 1 · Accepted Answer · answered Sep 18 '17 at 11:37

1

You need to use a function:

var d = function(id) 
{
    return document.getElementById(id);
}

and then you can use it like so:

var el = d('someId');

answered Sep 18 '17 at 11:37

Stuart

6,330
2
22
36

I think it's quite common to see answers get downvoted just because they answer questions that the voter believes are bad. Kind of like a downvote for 'why are you answering this bad question when it's a duplicate and should be closed' – musefan Sep 18 '17 at 11:44
Maybe. I think those people have forgotten that they too were once learning, and maybe didn't see the duplicate question. Some new people aren't even sure how to ask what they need. I'd rather be helping folks than being some elitist tart though. – Stuart Sep 18 '17 at 11:47
@musefan: May I ask how this question is a *bad* question. Duplicate? Certainly. But bad? :) – sampathsris Sep 18 '17 at 11:49
@Krumia: I mean as a reason why people downvote valid answers in general, not just specifically this question. I agree, it is a well written question. – musefan Sep 18 '17 at 11:51
@Stuart: Well in that case, you won't mind the downvote then... – musefan Sep 18 '17 at 11:52
Indeed @musefan that's correct. It occasionally leaves me bewildered mind. – Stuart Sep 18 '17 at 11:53
@Stuart: Yeah I get that. Even I have downvoted answers in the past for this reason. Also, I expect I will again in the future. Yet for some reason I didn't down vote these ones. I think I didn't downvote because they provide a solution for a well written question. Maybe you should consider posting an answer on the dupe, it doesn't seem to have your solution yet. Although, my initial thoughts are to question how reliable your solution is. It may be fine, but I would personally be cautious about using it without a better understanding of why it works. – musefan Sep 18 '17 at 11:57

Why does assigning a function (which belongs to an object) to a variable behave this way?

1 Answers1