MOOTOOLS variable scope

Question

I'm using mootools: I can't figure out how to use a variable when using an addEvent.

I want to use a for next loop to set values in a loop:

for (x=0;x<num;x++){
var onclickText = 'function (){onclick="addPageMoveEvent('+x+'"); }';
$('pageNum'+x).addEvent('click', onclickText);
}

>

I've search forums but not found any help.

Any help would be great.

Thanks

Answer 1

Warning: this first example will not work! Read on for an explanation.

You are confusing onclick HTML syntax with the MooTools addEvent. Try

for (var x=0;x<num;x++){
    $('pageNum'+x).addEvent('click', 'addPageMoveEvent('+x+');');
}

This is simpler and cleaner, but might still not do what you want. This code will call the function addPageMoveEvent every time the link is clicked... is that what you want?

Since MooTools doesn't allow the above method, you must use the following:

A programmatically more interesting and less hazardous way to do the same would be:

factory = function (x) { return function() { addPageMoveEvent(x); }; };
for (var x=0;x<num;x++){
    $('pageNum'+x).addEvent('click', factory(x));
}

This uses a factory for creating closures that hold your values of x... rather complex code, but it's the purist way. It also avoids using the scary eval that occurs because you feed addEvent a string. (It seems that MooTools doesn't like the other option anyway.)

Answer 2

The addEvent method in MooTools accepts two arguments:

myElement.addEvent(type, fn);

Arguments:

• type - (string) The event name to monitor ('click', 'load', etc) without the prefix 'on'.
• fn - (function) The function to execute.

It does not take a string and passing a string such as "myFunction()" or "function() { myFunction(); }" will not work.

Since you are inside a loop, and the variable x will share the environment, you need to wrap its value inside another closure. One way is to use an additional closure:

$("pagenum" + x).addEvent("click", (function(value) {
    return function() { addPageMoveEvent(value); }
})(x));

See all questions on StackOverflow regarding this particular problem of creating closures within loops.

Also worth checking out is this MDC article - Creating closures in loops: A common mistake

Answer 3

That a use case for mootools pass method.

for (x=0;x<num;x++){
  $('pageNum'+x).addEvent('click', addPageMoveEvent.pass(x));
}

Pass internally creates a closure that holds x in the his scope, so when the click event is fired it has the right value cause its not the same from the for loop.