many DIV element & onclick event

[ginacrol]

i have 20 DIV element
<DIV id="c1"></div>
<DIV id="c2"></div>
<DIV id="c3"></div>
<DIV id="c.."></div>

my code works correctly but it's a long code for each DIV:)

var mydiv1
var mynode1
mydiv1 = Ext.get('c1');
mydiv1.on('click',function(){
mynode1 = tree.getNodeById(mydiv1.dom.innerHTML);
mynode1.disabled=false;
mynode1.enable();
mynode1.ui.removeClass("x-tree-node-disabled");
mynode1.render();});

var mydiv2
var mynode2
mydiv2 = Ext.get('c2');
mydiv2.on('click',function(){
mynode2 = tree.getNodeById(mydiv2.dom.innerHTML);
mynode2.disabled=false;
mynode2.enable();
mynode2.ui.removeClass("x-tree-node-disabled");
mynode2.render();});



i tried this code, it's very short, but when i click on my div I got error "arr_mydiv[i] has no properties":((

var arr_mydiv = new Array();
var arr_mytreenode = new Array();
for (var i = 1; i<21; i++)
{
arr_mydiv[i] = Ext.get('C'+i);
arr_mydiv[i].on('click',function(){
error-----> arr_mytreenode[i] = tree.getNodeById(arr_mydiv[i].dom.innerHTML);
});
}


anyone help me? thanks

[hendricd]

You'd be in big trouble later with all those anonymous function Handlers.

Google this: Javascript event delegation

then apply that concept to:

<div id="clist">
<DIV id="c1"></div>
<DIV id="c2"></div>
<DIV id="c3"></div>
<DIV id="c.."></div>
</div>

Ext.get('clist').on('click',yourMasterTreeNodeEnabler);

[ginacrol]

thanks!
your suggestion has solved my problem:D