How can you include variables that stay the same in jQuery functions?

Question

I'm writing a web app that has multiple buttons. I want each button to have almost the same behaviour, but i have a variable that needs to be different at each button.

I use jQuery. I have a loop that sets the functionality of each button, like in the following example:

for (var i = 1; i <= 7; i++) {
    $("#button" + i).click(function() {
        $("#result").html("Button " + i + " was clicked.");
    });
}

When i click Button 4 i want to get displayed that button 4 was clicked, but it says that button 8 was clicked, because that is the value of i at the end of the loop. How can i solve this, so that i can have different results for every button?

EDIT: I solved it by using "let" instead of "var" for the i variable

I recommend using a class and the same logic for all buttons. Set a [data attribute](https://api.jquery.com/data/) on each button to define the appropriate value and fetch that value when you click a button. Here's [an example](https://stackoverflow.com/a/20540400/924299). — showdev, May 30 '19 at 11:10

score 0 · Answer 1 · answered May 30 '19 at 11:08

You can check it with id start with and then fetch number from id and show

$(document).ready(function() {
  $("[id^='button']").click(function() {
    var num = $(this).attr("id").match(/\d+/)[0];
    $("#result").html("Button " + num + " was clicked.");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="btn1" id="button1" value="Button 1">
<input type="button" name="btn2" id="button2" value="Button 2">
<input type="button" name="btn3" id="button3" value="Button 3">
<input type="button" name="btn4" id="button4" value="Button 4">
<input type="button" name="btn5" id="button5" value="Button 5">
<input type="button" name="btn6" id="button6" value="Button 6">
<input type="button" name="btn7" id="button7" value="Button 7">
<br/>
<div id="result"></div>

score 0 · Answer 2 · answered May 30 '19 at 11:09

There are lots of ways to approach this. Overkill would be to use a closure to maintain the scope of i:

for (var i = 1; i <= 7; i++) {
  (function(i) {
    $("#button" + i).click(function() {
      $("#result").html("Button " + i + " was clicked.");
    });
  })(i);
}

Alternatively you could just read the id from the button which was clicked directly:

for (var i = 1; i <= 7; i++) {
  $("#button" + i).click(function() {
    $("#result").html(this.id + ' was clicked.');
  });
}

Taking that a step further you could use a common class on all the buttons to avoid the loop entirely:

$(".button").click(function() {
  $("#result").html(this.id + ' was clicked.');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1" class="button">1</button>
<button id="button2" class="button">2</button>
<button id="button3" class="button">3</button>
<button id="button4" class="button">4</button>
<button id="button5" class="button">5</button>
<button id="button6" class="button">6</button>
<button id="button7" class="button">7</button>
<div id="result"></div>

How can you include variables that stay the same in jQuery functions?

2 Answers2