Question

I want to implement some functions and variables into Element member of mootools. I have something like this

Element.prototype.currentChild = this.getFirst();
Element.prototype.scrollToNext = function(delta, tag){ .... }

After that I create a new element and bind the mousewheel event to a span and acces it’s currentChild.

body_container = new Element('div', {
events:{
            'mousewheel': function(e){
                var elem = new Element(this);
                elem.currentChild.setStyle('background-color', 'transparent');
                elem.scrollToNext(e.wheel);
                elem.currentChild.setStyle('background-color', '#C6E2FF');
                e.stop();
            }
        }
    });

The problem is I get the following error:

Uncaught TypeError: Object [object Window] has no method ‘getFirst’

Do you know what might cause this?

LE: Yes, I was expecting ‘this’ to be an Element. But I can’t see why it would be Window type.

Answer 1

use Implement to change the prototype. and you will need a function, can’t say something.prototype.method = this.somethingsMethod as this is not bound outside of the execution context of the method.

Element.implement({
    currentChild: function() {
        return this.getFirst();
    },
    scrollToNext: function() {}
});

MooTools also has alias.

Element.alias('currentChild', 'getFirst');

https://github.com/mootools/mootools-core/blob/master/Source/Core/Core.js#L223-225 – aliasing on type methods, when you don’t want to re-implement.

to be honest, why can’t you just use element storage instead?

'mousewheel': function(e) {
    var elem = document.id(this),
        first = elem.retrieve('currentChild');

    first || elem.store('currentChild', first = elem.getFirst());

    first.setStyle('background-color', 'transparent');
    elem.scrollToNext(e.wheel);
    first.setStyle('background-color', '#C6E2FF');
    e.stop();
}