How to use for loop to add all buttons' click event?

Question

Suppose there are 5 buttons.
When each button clicks, it shows the alert box of the button's value.

For instance,
when I click Button 2, it shows the alert box of "You click Button 2";
when I click Button 4, it shows the alert box of "You click Button 4."

Below is the traditional way to practice it:

<script>
$(function(){
    $("#b0").click(function(){
        alert("You click Button 0");
    });
    $("#b1").click(function(){
        alert("You click Button 1");
    });
    $("#b2").click(function(){
        alert("You click Button 2");
    });
    $("#b3").click(function(){
        alert("You click Button 3");
    });
    $("#b4").click(function(){
        alert("You click Button 4");
    });
});
</script>

<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

But it is too inefficient and unprofessional, so I changed it like below:

<script>
$(function(){
    for(i=0;i<5;i++){
        $("#b"+i).click(function(){
            alert("You click Button "+i);
        });
    }
});
</script>

<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

After changing, it always shows "You click Button 5." How can I solve this question using for loop?

The answer below is going to work for you, to understand *why* this happens, read the answer here: http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue — aaronofleonard, May 13 '16 at 15:11
how about giving all buttons the same class name say "btn" and on click callback function alert "You clicked" + this.text() ? — tkay, May 13 '16 at 15:12

Pranav C Balan · Accepted Answer · 2016-05-13T15:24:12.343

You are always firing the value of variable i, after the for loop the value will be 5. So use a self calling function with argument i.

$(function() {
  for (i = 0; i < 5; i++) {
    (function(i) {
      $("#b" + i).click(function() {
        alert("You click Button " + i);
      });
    })(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

Or in latest browser use let for block scope level local variable value

$(function() {
  "use strict";
  for (let i = 0; i < 5; i++) {
    $("#b" + i).click(function() {
      alert("You click Button " + i);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

Or you can use index() method and attribute start selector

$(function() {
  var $sel = $('[id^=b]');
  $sel.click(function() {
    alert("You click Button " + $sel.index(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

score 0 · Answer 2 · answered May 13 '16 at 15:18

0

Alternatively you can use jQuery attribute selector

  $("button[id^='b']" ).click(function(){
      alert("You click Button " + this.id.substring(1));
  });

answered May 13 '16 at 15:18

msapkal

8,268
2
31
48

How to use for loop to add all buttons' click event?

2 Answers2