JavaScript syntax doubt? (mootools)

Question

EDIT: This got way too complicated, I will migrate this question to another question and put up my new code there! Please ignore the code on this because it is logically flawed. (Please vote to close the question as it makes no sense)

Hi,

I am initializing the following loops in my code. The code is written using mootools.

CANVAS.init({ canvasElement : 'canvas', interactive : true });

var itemlayer = CANVAS.layers.add({ id : 'items' });

for(var j = 0; j < 5; j++)
{
  for(var i = 0; i < 5; i++)
  {

    itemlayer.add({

        id : 'item-'+i + '-' + j,
        x : 51 * i,
        y : 51 * j,
        w : 50,
        h : 50,
        state : 'normal',
        interactive : true,
        colors : { normal : '#f00', hover : '#00f' },
        events : {
            onDraw : function(ctx){

                    ctx.fillStyle = this.colors[this.state];
                    ctx.fillRect(this.x,this.y,this.w,this.h);

                    this.setDims(this.x,this.y,this.w,this.h);
            }
        }

    });


}

}



/* object that hold the information whether a certain object
 * is in animation right now or not. This is used to prevent
 * multiple Cmorph instances working on the same item
 * */

  var locked= {};
  for(i= 0; i<6; i++)
  for(j= 0; j<6; j++)
  {
    itemid = 'item-'+i+'-'+j;
    itemid : false,
  }
    //then once I have done that
    //animate all items with the function given below

    function animate()
    {
   for(i=0;i<6;i++)
        for(j=0;j<6;j++)
        {
          itemid = 'item-'+i+'-'+j;
          if(locked.itemid)return;  //guess even this will return errors!
      locked.itemid = true;
      var item = CANVAS.layers.get('myLayer').get(itemid);

                  new Cmorph(item,{
                    duration : 1000,
                    transition : 'bounce:out',
                    onComplete : function()
                    {
                        locked.itemid = false;
                    }
                }
      ).morph({
        y : (item.y == 50?375:50),
        scale : (item.scale == 1?2:1)
    });
       }
    }

    CANVAS.addThread(new Thread({
            id : 'myThread',
            onExec : function(){
                    CANVAS.clear().draw();
            }
    }));​

Is my syntax correct and will all the id's get locked or am I going to have errors. Also if I am making a mistake, could you please correct me. I know this is a very dumb doubt, but please bear with me! thanks :)

Answer 1

I am not exactly sure what you mean by "locking", but the syntax has some errors. This is how i would do this:

var locked = [];
for (var i = 0; i < 6; i++) {
    for (var j = 0; j < 6; j++) {
        locked.push("item-"+i+"-"+j);
    }
}

It constructs an array of strings, holding your item-string.

You cannot use normal code statements inside of JSON ({}). You need to create it, and populate it afterwards, if you need this (more complex) behaviour.

EDIT: According to your clarification: I can spot a single syntax error at the end: Your inner for-loop is missing his closing }. On the other hand, i do not know mootools in detail, so there might be mootools-related problems left.

Answer 2

You cannot have object locked. Instead you can use array as locked -

var locked = [];
for (var i = 0; i < 6; i++) { 
    for (var j = 0; j < 6; j++) { 
        var itemStr = "item-"+i+"-"+j;
        locked.push(itemStr); 
    } 
} 

This will store all your IDs in the array locked and you can access using locked[index]

Answer 3

I'm not sure what you mean when you say "locking", but are you trying to create an object that uses the itemids as properties, which are set to false?

/* create empty object */
var locked = {};
/* loop & populate */
for(var i = 0; i < 6; i++) {
    for(var j = 0; j < 6; j++) {
        var itemStr = "item-" + i + "-" + j;
        locked[itemStr] = false;
    }
}

/* use id */
if(!locked["item-0-0"]) {
   // do something
}

Answer 4

It's not clear from your question, but I think you might mean:

var locked= {};
for(i= 0; i<6; i++)
    for(j= 0; j<6; j++)
        locked['item-'+i+'-'+j]= false;

Names in JavaScript {name: value} object literals are limited to quoted strings or unquoted literal names taken as strings and not general expressions. So you can't have a variable name in an object literal. Instead you have to write the property after creation, using [] access. (a['b'] is the same as a.b.)