Understanding $ in Mootools

Question

I'm new to Javascript and Mootools and am having a bit of trouble understanding some things, especially since the documentation on Mootools is, shall we say, lacking at best.

My question is regarding the $ selector.

Why is it that I can chain some properties to it, and not others?

For example why does

$('results').style.border = "1px solid #000000";

work, but

$('results').innerHTML = "foo";

does not?

Thanks in advance.

Answer 1

The first example is not really an example of "chaining".

style is a DOM-standard object representing the CSS style of an element. It has nothing to do with MooTools - it's just standard dot notation for accessing properties of objects.

"Chaining" is when the result of an operation on an object returns the object itself after the operation, allowing you to do stuff like this:

$('id').show().move_left(200).fadeOut();

Lastly, that second example ought to work. You should post the actual source.

Answer 2

Triptych's answer is great. I just want to help you get more moo out of mootools.

$('results').setStyle('border','1px solid #000');
$('results').set('html','foo');

// all together now
$('results').setStyle('border','1px solid #000').set('html','foo');

You don't want to use innerHTML anymore if you're grabbing elements with $ (or using any framework, really).

Functions return something when they are called. Most methods (functions) in mootools return the thing it alters (like $('results')), so you can chain another function onto it.

Your examples aren't chaining. They are simply selecting properties of your object, not calling methods.

---

Mootools documentation is fantastic. You're just not familiar with the language enough yet. Mootools is considered to have a steeper learning curve, so that might be part of the problem.

I was like you, new to both mootools and javascript generally. After trudging through for a while I figured mootools out, and, unknowingly, learned javascript at the same time. The docs were integral to that.

Answer 3

http://keetology.com/blog/2009/07/00-up-the-moo-herd-mootools-tips-and-tricks

This is a great Introduction to the lower level javascript features of Mootools.