javascript - How do I add events to array elements? -

javascript - How do I add events to array elements? -

my code

var boxes = document.getelementsbyclassname("box"); for(var i=0; i<boxes.length;i++) { boxes[i].addeventlistener("dblclick", function(e){ this.classlist.add("animatesize"); this.style.width="2px"; this.style.height="2px"; window.settimeout(2000); }); }

initially have 1 box, create more boxes when double click of newly created boxes nil happens, when double click initial box event triggered.

what doing wrong?

ps. when alert(boxes.length) after i've created, lets 4 boxes, right length alerted(5=4 + 1 initial box).

trouble code attaches event handlers matches loaded in dom. if on dom load, no 'future' elements have event attached.

you hear double click on static container (i've gone document) , create check see whether element targeted had class box. if so, carry out code:

document.addeventlistener("dblclick", function(e){ if(e.target.classlist.contains('box')){ var box = e.target; box.classlist.add("animatesize"); box.style.width="2px"; box.style.height="2px"; window.settimeout(2000); } });

also known event delegation.

note you'd want alter document closest static container of boxes.

there other ways of course, attaching event handlers every time add together nodes dom.

jsfiddle

javascript events