Defining a function with a variable whose value should be frozen

Question

Look at the following code.

for(i=1;i<=10;i++){
    $('#field'+i).click(function(){
        alert(i);
    });     
}

When I click one of those fields I get an 11. Of course I know why: Because at the moment I click it the value of the variable i is 11. But I guess you know what I actually want. How do I do that?

Answer 1

Use let to limit your i within the loop scope. That would solve your problem.

for(let i=1;i<=10;i++){
    setTimeout(function(){
        console.log(i)
    }, 500);     
}

Answer 2

From what I see you want to get the specific field id.

I would do something like this:

for(i=1;i<=10;i++){
    $('#field'+i).click(function(){
        var id = $(this).attr("id").replace("field", "");
        alert(id);
    });     
}

Basically what you're doing in your code is that you are telling the button to alert the current value of i when clicked.

Answer 3

Create a closure with IIFE:

for(i=1;i<=10;i++){
  (function(j){
    $('#field'+j).click(function(){
        alert(j);
    });
   })(i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="field1">1</button>
<button id="field2">2</button>
<button id="field3">3</button>
<button id="field4">4</button>
<button id="field5">5</button>
<button id="field6">6</button>
<button id="field7">7</button>
<button id="field8">8</button>
<button id="field9">9</button>
<button id="field10">10</button>

Answer 4

You can solve it with an Immediately-invoked Function Expression.

for(i=1;i<=10;i++){
  $('#field'+i).click(function(j){
     return () => alert(j);
  }(i));     
}