Looping a button click event in jQuery

Question

This loop doesn't seem to be working, I'm not sure where i'm going wrong but would appreciate any help.

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

Basically on the click of the button it should alert out the number the loop is up to (right?) but it just alerts '10' on every one?

It's late and I know I must be doing something wrong, but I can't think what.

Here is a fiddle of my loop: https://jsfiddle.net/p8v5sejr/

Possible duplicate of JavaScript closure inside loops – simple practical example — Ivar
– Ivar, Commented Mar 22, 2019 at 1:01

tam.dangc · Accepted Answer · 2019-03-22 01:16:27Z

1

It's about function scope and block scope

Just use let to declare i in for loop

// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) { // <-- use let
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

answered Mar 22, 2019 at 1:16

tam.dangc

2,0621 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FoxyFish Over a year ago

This is what i was trying to think of but couldnt think of it! Let! I need sleep 🤣

Jack Bashford · Accepted Answer · 2019-03-22 01:01:21Z

1

It's because the loop runs, then when you click on your buttons, j is equal to 10. Since your values are coming from the button's IDs, you can use that to your advantage:

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert($(this).attr("id").split("btn-")[1]);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

answered Mar 22, 2019 at 1:01

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

Jack Bashford Over a year ago

No problem whatsoever @FoxyFish - if my answer fixed your problem, please mark it as accepted by clicking the grey tick mark to the left of my answer.

Mr. Polywhirl · Accepted Answer · 2019-03-22 01:03:21Z

1

You can grab the id off of the current target element and parse out the index.

for (let index = 0; index < 4; index++) {
  $('#btn-' + index).click(function(e) {
    var value = parseInt(e.target.id.replace(/[\D+]/g, ''), 10);
    alert(value);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

answered Mar 22, 2019 at 1:03

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Comments

MyHealingLife · Accepted Answer · 2019-03-22 01:13:50Z

1

Try this,

$( "button[id^=btn]" ).each(function(index) {
    $(this).on("click", function(){
        var idvalue = $(this).attr('id'); 

        //alert(index);
        //or
        idvalue = idvalue.replace("btn-","");
        alert(idvalue);
    });
});

answered Mar 22, 2019 at 1:13

MyHealingLife

155 bronze badges

Comments

Adrian Brand · Accepted Answer · 2019-03-22 01:05:59Z

0

If you do the event binding in a function you get a closure keeping the value.

var j = 0;
for (j = 0; j < 10; j++) {
  addClick(j);
}

function addClick(j) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

answered Mar 22, 2019 at 1:05

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Comments

Nguyễn Huy · Accepted Answer · 2024-03-28 08:26:20Z

0

Do not use variable values. Let's use arrays to do that!

var listEvent = [1, 2, 3, 4, 5];
listEvent.forEach(function(id) {
  addClick(id);
});

function addClick(j) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

answered Mar 28, 2024 at 8:26

Nguyễn Huy

1

Collectives™ on Stack Overflow

Looping a button click event in jQuery

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related