人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptで次のようなプログラムを作成しました。

for (i=0; i<5; i++) {
document.getElementById('x'+i).onclick = function() {
xxx(i);
}
}

これで、5個の似たようなボタンにイベントを割り当て、ボタンごとにidを変えて動作させたいのですが、正常に動作しません。

イベント発生時の呼び出しが、その都度評価されるようで、必ず最後の値で(ここでは 6)で呼び出されてしまうのです。これを、きちんと 1, 2, 3, 4, 5の値でそれぞれ呼び出すようにするにはどうしたらよいでしょうか? 教えてください。

●質問者: selter
●カテゴリ:ウェブ制作
✍キーワード:JavaScript イベント プログラム ボタン 作成
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● GoldenDawn
●23ポイント

そのコードだと 0?4 になると思いますが。


例えばこんな感じとか

for (i=0; i<5; i++) {
 eval("\
 document.getElementById('x'+i).onclick = function() {\
 xxx("+i+");\
 }\
 ") ;
}
◎質問者からの返答

ありがとうございます!

今回は、他の方のコードを参考にさせていただきましたが、知識として大変参考になりました。ありがとうございました!


2 ● Numeric
●35ポイント ベストアンサー

xxx(i)の引数iのスコープの問題です。(グローバル変数になっています)

解決策として、たとえば以下のようにメンバー変数にしてしまう方法があります。

for (i=0; i<5; i++) {
  document.getElementById('x'+i).indexNo = i;
  document.getElementById('x'+i).onclick = function() {
    xxx(this.indexNo);
  }
}
◎質問者からの返答

ありがとうございます。その方法でばっちり解決することができました。

誠にありがとうございました!


3 ● Mars
●23ポイント
document.getElementById('x'+i).onclick = Function('xxx('+i+')');

とか、少し変わっちゃうけど、

document.getElementById('x'+i).onclick = function(){xxx(this.id)};

とか。

前者はFunction関数で文字列を関数として定義してます。

後者はオブジェクトのid('x0'?'x4')を渡しています。(関数xxxも改造が必要)

◎質問者からの返答

ありがとうございます!

今回は、他の方のコードを参考にさせていただきましたが、知識として大変参考になりました。ありがとうございました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ