質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

10776閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/04/09 09:54

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

lang=javascript

1var stage = new createjs.Stage('canvas'); 2var shapes = []; 3 4for(var i = 0; i < 5; i++) { 5 shapes[i] = new createjs.Shape(); 6 7 shapes[i].graphics.beginFill('Blue') 8 .drawRect(20, i * 50, 100, 40); 9 10 shapes[i].addEventListener('click', function () { 11 console.log('clicked : ', i); // どれをクリックしても'clicked : 5'となる 12 }); 13 14 stage.addChild(shapes[i]); 15}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

JavaScript

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

投稿2016/04/09 15:20

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/04/16 15:05

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

0

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

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

投稿2016/04/09 14:30

realizerS

総合スコア265

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/04/16 15:06

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

0

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

投稿2016/04/09 10:18

takasima20

総合スコア7458

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/04/16 15:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問