Binding an event listener outside of the markup.

Also, using $() and $F() convenience functions!

This checkbox does not have an onclick or any other event handler directly defined. This is instead using prototype's bindAsEventListener function. View the page source to see the details.

Periodic Execution

You just arrived!

Element Helper

Click on this paragraph to add (then remove, alternately) a CSS class to it! It uses Element.addClassName(id, class) and Element.removeClassName(id, class).

Adding a event handler from outside the markup.

There is no event handler attribute (such as onclick) explicitly on this paragraph. But there's one registered anyway, thanks to Event.observe()!

If at first you don't succeed...

Try.these() executes each given statement until one succeeds, allowing for more concise "try/catching" and easier cross-browser support management.

Click me to execute with one good 'false' statement and one good 'true' statement.

Click me to execute two bad 'unsuccessful' statements.

Click me to execute the 'unsuccessful' statements above, but with a default 'false' option.

Element Methods

The paragraph below can be manipulated by the following links. Try it!

This is the target paragraph, with id "elemental"

Click for: Element.toggle('elemental');

Click for: Element.hide('elemental');

Click for: Element.show('elemental');

Click for: Element.remove('elemental');

Note: remove can only be called once per page load. The links above will result in JavaScript errors if clicked after the element has been removed.

Insertion Methods

The paragraph below can be manipulated by the following links. Try it!

  1. This is a list item in an ordered list - "firstLi"
  2. This could be a table or paragraphs instead of a list - "secondLi"

new Insertion.Top('insertTarget', getInsertText());

new Insertion.Bottom('insertTarget', getInsertText());

new Insertion.Before('secondLi', getInsertText());

new Insertion.After('firstLi', getInsertText());

Form Methods

This is my "convenientForm".

Without Prototype: document.forms['convenientForm'].elements;

With Prototype: Form.getElements('convenientForm');

More Prototype: Form.serialize('convenientForm');