How to bind method to multiple objects in for loop in JavaScript

Asked Dec 28 '15 at 17:24

Active Dec 28 '15 at 17:24

Viewed 35 times

I am looking for best way how to bind one method for multiple objects in JavaScript.

What I need to do is to create multiple objects in runtime and then bind them the same functionality let say "change color on mouse over".

I have method:

function changeElement(element) {
  element.fill({
    r: ~~(Math.random() * 255),
    g: ~~(Math.random() * 255),
    b: ~~(Math.random() * 255)
  });
}

and I have code:

for (i = 0; i < 5; i++) {
  var r = draw.rect(50, 50);
  r.move(i * 80, 100);
  r.mouseover(function() {
    changeElement(r);               // <-- this is not working
  });
};

but is not working for all objects in loop just for last one.

I am doing something wrong but I don't know what.

Full example here https://jsfiddle.net/mojno7/2ysowx5u/.

asked Dec 28 '15 at 17:24

mojmir.novak

2,920
3
24
32

1

`r.mouseover = function(){changeElement(r);};` perhaps? – neilsimp1 Dec 28 '15 at 17:26
I was answering the question and it got closed :) just check [this](https://jsfiddle.net/2ysowx5u/2/) for a working example. – Aᴍɪʀ Dec 28 '15 at 17:30
Inside the event handler refer to the event source (`this`) rather than `r`. – John Keyes Dec 28 '15 at 17:32
@neilsimp1 nope, this is not working – mojmir.novak Dec 28 '15 at 17:33
@JohnKeyes great! Thank you! – mojmir.novak Dec 28 '15 at 17:34
@Aᴍɪʀ Thank you! Example is working but honestly I don't understand that difference. Can you please explain me where is the difference between my and yours solution? They seems to be so close. – mojmir.novak Dec 28 '15 at 17:41
1

@mojmir.novak You are defining `r` with `var` which defines it at function scope, not block scope. In the callback you are using `r` again which bounds to the last value assigned to `r`. – Aᴍɪʀ Dec 28 '15 at 17:49

How to bind method to multiple objects in for loop in JavaScript

0 Answers0