Adding event listeners to buttons created from an array

Question

I'm creating buttons out of "tags" taken from my database. I'd like to add mouse event listeners to each button. However, the listener only seems to work on the last created button. Any ideas? Thanks.

var tagsContainer = document.getElementById('tags');
var tagarray = placetags.split(" ");
for (var tagcounter = 0; tagcounter < tagarray.length; tagcounter++){
  var tag = document.createElement('input');
  tag.type = 'button';
  tag.value = tagarray[tagcounter];
  tag.id = 'tagbutton';
  tagsContainer.appendChild(tag);
  tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
  });
  tag.addEventListener('mouseout' , function(){
    tag.style.color = 'orange';
  });
}

thanks. a simple "this.style.color" instead of "tag.style.color" of course! — stokexx
– stokexx, Commented Dec 8, 2012 at 3:08
Sorry, I didn't even realize that I changed that. Adam's answer explains why. — Blender
– Blender, Commented Dec 8, 2012 at 3:10
Note that you can use a single event handler for all of your buttons. — Dennis
– Dennis, Commented Dec 8, 2012 at 3:36

Adam Rackis · Accepted Answer · 2012-12-08 02:58:33Z

1

You need to change your handlers from this

tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
});

to this

tag.addEventListener('mouseover' , function(){
    this.style.color = 'white';
});

Since with your original code, your handlers are closing over the tag variable, and so tag ends up referring to the last button created.

edited Dec 8, 2012 at 2:58

answered Dec 8, 2012 at 2:52

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stokexx Over a year ago

I'm still seeing multiple buttons, however. Right now I'm just looking to do mouseover / mouseout events.

Collectives™ on Stack Overflow

Adding event listeners to buttons created from an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related