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

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

ただいまの
回答率

87.80%

for文の中でfocusイベントで変数の出力がおかしい?

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 363

score 84

下記の結果が「2」になるのですが、なぜでしょうか?

for(var i=1; i<=1; i++) {
 $("#test").focus(function() {
  console.log(i);
 }
}

単純な疑問ですみません。

※追記です。

たとえば、

var i=1;
$("#test"+i).focus(function() {
console.log(i);
});

var i=2;
$("#test"+i).focus(function() {
console.log(i);
});

固定テキストに連番が付いたidの要素にfocusしたときのイベントを上記のように実装する場合、これをループで書こうとしたのですが(というか、それが本質問を投稿した経緯なのですが)、どのように書けばいいのでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • y_waiwai

    2020/01/22 20:24

    2でなければ、なにになるはずと思ってらっしゃるのでしょうか

    キャンセル

  • avantgarden

    2020/01/22 20:31

    1です。どこでiが1増えてるのかが分からなくて…

    キャンセル

  • y_waiwai

    2020/01/22 20:32

    i++ してますね

    キャンセル

回答 3

+1

あるあるネタですね
forとvarの特徴です。
letにすると1になります

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/22 20:46

    初期値を入れて、条件が正ならループして評価式を実行します
    i=1で一度ループしたので一回りするとiは2になっています。
    focusした時点でiを参照すれば2になります

    キャンセル

  • 2020/01/23 11:33

    ご回答ありがとうございます。
    なるほど…。自分でも調べてみます。

    キャンセル

+1

このforループを抜けたときはiは2になってます。
このイベントはいつ実行されるのか考えてみるといいかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

下記の結果が「2」になるのですが、なぜでしょうか?

Uncaught SyntaxError: missing ) after argument list になるはずです。

正しくイベントハンドラを定義するコードで示すと、次のように置き換えることができます。

 var i=1;
 $("#test").focus(function() {
  console.log(i);
 });
 i++;

focusを得てイベントが発火するのは、i++ 以降なので、イベントハンドラから参照するi は「2」になっています。

for文の中でfocusイベントで変数の出力がおかしい?

ご質問に挙げられたコードの for の条件式を、例えば i<=4 に変えてみてください。

for(var i=1; i<=4; i++) {
 $("#test").focus(function() {
  console.log(i);
 })
}

このときは focus を得ると 「5」が 4回連続で出力されます。

5


これは、同じイベントリスナが4回登録されているためです。

単純な回答をするなら「for文の中での変数の出力より、イベント定義を繰り返すほうがおかしいです。」となります。
イベントリスナの登録/解除についても再確認されると良いでしょう(MDN イベントリファレンス)。

追記)

id属性に数字のサフィックスがある仕様なら、イベントリスナ内で、ターゲット要素のid属性値を文字列処理する方法もありそうですが、次の質問・回答が類似する内容かもしれません。
onclickの登録に関して。 ご参考になれば。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/23 11:21 編集

    詳細にご説明いただきありがとうございます。

    コメント欄にコードが挿入できないので、本文に追記しました。
    イベントリスナをループで書く方法が分かりません。

    Uncaught SyntaxError: missing ) after argument list

    については、コードの誤植でした。
    すみません。ご指摘ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る