By Jagd

2009-05-12 18:48:58 8 Comments

It is common for me to register javascript functions for certain events by doing something like:

myBtn.Attributes.Add("onClick", "Validate(getElementById('"+txtFirstName.ClientID + "'));");

I've always used getElementById by itself, or in other words, sans document being prepended to it. But I'm having pages break on me lately when I try to use getElementById instead of document.getElementById. Why is this? Oddly, I have a website where one page allows me to use just getElementById, but another other page throws a javascript error because it can't find the element if I do just getElementById, and it'll only work if I do document.getElementById.

Anyone know why this is? Should I be using document.getElementById everywhere, regardless of whether it works without the document prefix?

EDIT: Could it have anything to do with the fact that one page is using AJAX and the other isn't?


@albertein 2009-05-12 18:54:28

When you use getElementById() and it works that mean that the function where it's called is running on the context of the document, that's is this == document.

So, you should ALWAYS use document.getElementById to avoid that kind of errors.

Anyway, I would even stop using getElementById altogether and start using JQuery, i'm sure you'll never regret it.

Your code would look something like this if you used JQuery:

$("#myBtnID").click(function () { Validate($("#myTextboxID"))});

@cgp 2009-05-12 19:02:22

+1, seriously, there is a lot of utility in using a high quality JS library

@Jagd 2009-05-12 19:04:09

Awesome. I will definately take a look at JQuery.

@Christoph 2009-05-12 19:18:01

sorry, but your description is wrong: the current lexical environment (the 'context') is different from the object referenced by this; if a plain getElementById() works, it doesn't mean that this == document, but that a variable with such a name is defined in an enclosing function or the global object (aka window)

@albertein 2009-05-12 19:33:02

Well, it does not need to be (this == document), but getElementById must be defined on the current stack frame or in the current this object, or if there is a global object (i dont know if there is, i need to read about that) it must be defined on it as you say. sorry if i was inaccurate in order to make a short answer

@Christoph 2009-05-12 19:42:47

@AlbertEin: the current this object is not part of the 'stack frame' - the lexical environment is built from the scopes of enclosing functions, the global object (window) and any object explicitly added via the with() statement; if you want to access properties of the object referenced by this, you have to do it explicitly!

@albertein 2009-05-12 21:54:16

@Christoph i know that the "this" object is not part of the stack frame, and i never said so. I dind't knew that you needed to call members of "this" explicitly, i just tought it behaved like other languages like C# and Java, my bad. Now i'm intrigued, if "this" members must be referenced explicitly, and getElementById gets referenced based on the global object (window) why it would sometimes work or don't based on the enclosing function?

@Garrett 2010-06-28 01:01:33

"Anyway, i would event stop using getElementById altogether and start using JQuery" - LOL

@Timwi 2011-09-05 15:00:17

For such a hideously wrong answer, it has remarkably many upvotes.

@marcgg 2009-05-12 18:52:06

You should only use document.getElementById (even if I'd recommend using libraries like prototype or jquery to be able to use the $ sign).

If you are able to use getElementById on its own, it's just because the browser you're using is doing some kind of trick to get it to work, but the correct way is to use the document variable.

@stpe 2009-05-12 18:54:41

The correct way is indeed document.getElementById().

The reason (speculation) it might work by itself is that depending on where you use it the current context may in fact be the document object, thus inexplicitly resulting in document.getElementById().

@seanmonstar 2009-05-12 18:54:30

Any function or variable you access without an owning object (ex: document.getElementById) will access the property from window.

So getElementById is actually window.getElementById, which isn't natively defined (unless you defined it before (ex: getElementById = document.getElementById).

@staticsan 2009-12-02 00:32:16

Some older versions of FF and IE had this dilemma: it was window.getElementById in one and document.getElementById in the other.

@Joel Coehoorn 2009-05-12 18:54:00

You should use the full document.getElementById(). If you find that too verbose, you could use jQuery:

$('#' + id)

or you could create an alias at the top of your script:

var byID = document.getElementById;

@Christoph 2009-05-12 19:19:49

your alias might not work because it doesn't bind this to document; to make it work, you'd have to use var byID = function(id) { return document.getElementById(id); };

@Jagd 2009-05-12 19:21:22

I despise aliasing to no end, but I'm going to look into JQuery for sure. Thank you for the input!

@Mike Stanford 2009-05-12 18:52:30

I dont really know how to explain it but its because the getElementById() finds an element in the html structure of a page. Some browsers know that by default you want to search the document, but other browsers need that extra guidance hence document.

Related Questions

Sponsored Content

4 Answered Questions

9 Answered Questions

[SOLVED] Why does jQuery or a DOM method such as getElementById not find the element?

  • 2012-12-25 08:26:26
  • Felix Kling
  • 121298 View
  • 492 Score
  • 9 Answer
  • Tags:   javascript jquery dom

14 Answered Questions

[SOLVED] document.getElementById vs jQuery $()

29 Answered Questions

1 Answered Questions

1 Answered Questions

[SOLVED] Re-register javascript files after ajax callback complete

  • 2011-10-14 16:25:07
  • Loser Coder
  • 771 View
  • 1 Score
  • 1 Answer
  • Tags:   javascript ajax

4 Answered Questions

[SOLVED] using getElementById to change background of multiple DIV id's

2 Answered Questions

[SOLVED] getElementById() null error

Sponsored Content