How to retrieve an element with getElementById and then extend it to use Prototype methods?

Question

I have an input element with id billing:postcode. The Prototype $() selector is unable to select this element as described in this ticket.

I found this solution for the same problem in jQuery. I can't get it to work in Prototype. I tried:

var element = document.getElementById('billing:postcode');
Element.extend(element);
element.invoke(...);

and:

var element = document.getElementById('billing:postcode');
$(element).invoke(...);

Both don't work: Uncaught TypeError: Object #<HTMLInputElement> has no method 'invoke'

I know I can get the element with the CSS selector like this:

$$('#billing\\:postcode')

But I want to use getElementById

Why the "not a real question" close vote? The question is quite clear. — T.J. Crowder, Dec 19 '11 at 09:42

score 3 · Accepted Answer · answered Dec 19 '11 at 09:40

Your Element.extend(element); works, although the most common way is to just pass it through $():

var extended = $(document.getElementById('billing:postcode'));

But note that single elements don't have the Prototype invoke method, which is the real problem you're running into. :-) invoke is part of Enumerable, which only applies to lists of elements, not individual ones — its purpose is to call a given function on each element in the list. Rather than calling invoke, just call the function you're trying to invoke directly.

How to retrieve an element with getElementById and then extend it to use Prototype methods?

1 Answers1