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

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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.