for文で複数のボタンを作成し、onClickでどのボタンがクリックされたか分かるようにしたい

Question

言語はJavaScript、ライブラリにCreateJSを使用しています。
for文で複数のボタンを作成し、それぞれをクリックした際に何番目のボタンがクリックされたか分かるようにしたいと考えています。
試しに下記のソースを作成し、console.logで確かめたところ、全て5番目になってしまいました。
これを想定通りに表示するにはどうすればよろしいでしょうか?
よろしくお願いします。

var stage = new createjs.Stage('canvas');
var shapes = [];

for(var i = 0; i < 5; i++) {
    shapes[i] = new createjs.Shape();

    shapes[i].graphics.beginFill('Blue')
        .drawRect(20, i * 50, 100, 40);

    shapes[i].addEventListener('click', function () {
        console.log('clicked : ', i);    // どれをクリックしても'clicked : 5'となる
    });

    stage.addChild(shapes[i]);
}

Answer 1

addEventListener() で登録する function() は 'click' 時に実行されます。その時点では for が終わっているため、console.log() に渡る i は「5」になります。

for が終わる前に i を「登録する function() 」に渡してしまう方法が以下のようになります。

shapes[ i ].addEventListener( 'click', ( function ( i ) {
	return function () {
		console.log( 'clicked : ', i );
	};
} )( i ) );

Comments

[退会済みユーザー]

for文を回した後の状態でfunction()が実行されていたこと、
returnでその時のiを渡すことができることを知ることが出来ました。
ありがとうございました。

Answer 2

eventオブジェクトが引数として渡されたと思うので中身を確認すればいいんじゃないでしょうか.

shapes[i].addEventListener('click', function (ev) {
console.log(ev.target);
});

Comments

[退会済みユーザー]

すみません、今回はオブジェクトを見たいのではなく、
オブジェクトごとに割り振った番号を見たかったので・・・

Answer 3

スコープの問題じゃ?
ローカル変数ならどうでしょ。
分かりやすくするなら、各ボタンに
別々の関数を割り当ててみるとか。

Comments

[退会済みユーザー]

var shapes = [];でしょうか？
確かにこれも一つの原因のようでした。