Simplify Codes using While Loop

Question

I'm trying to simplify my code using while loop but the value can't seem to attach. Here is an example

  var x=1;
  while(x <= 20){
    $('.analytics' + x).click(function(event){
        analytics(x);
    });
    x++
  }

  var analytics = function(num){
    alert(num);
  };

Everytime I click a button containing a class analytics1-5 it returns a value of 20 when I expect it to be 1,2,3,4,5 . I have a vague idea that I'm passing 20 to the function analytics since the while loop already ended when I click a button. Can someone explain this to me ?

Answer 1

Edit: I got a little overzealous with my edits on your question. I apologize if I threw off other people who answered.

You're running into a scope/binding problem. It's been so long since I've dealt with < ES6 that I really struggled to remember how to solve it. I've updated my answer to have one possible solution.

This SO kind of covers it better than I did: Javascript infamous Loop issue?

$(document).ready(function() {
  for (var i=1; i<=5; i++) {
      $('.analytics' + i).click(function(event) {
        analytics($(this).index());
      });
  }

  function analytics(num) {
    console.log(num);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics1">A1</div>
<div class="analytics2">A2</div>
<div class="analytics3">A3</div>
<div class="analytics4">A4</div>

Original irrelevant answer:

Ugh, you are multiple binding. You have bound 20 click events to that piece of DOM. Once you click you are only seeing the last one.

The loop doesn't wait for you to click. You can confirm this by putting console.log(x); inside the loop and hit F12 to see that all 20 events have bound before you click.

Answer 2

You're basically telling it that once it's clicked, count to 21 and execute the function, 20 times.

I think what you mean to do just takes a quick tweak in the logic;

var x=1;
$('.analytics').click(function(event){
  while(x <= 20){   
      console.log(x);    
    x++
  }
 });

button {
  padding: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="analytics">Something to Click to Count to 20</button>

Wherein the example I just slapped a console.log in there for example but you could execute your method instead. Hope this helps, cheers.

Answer 3

Try this one:

      var x = 1;
    $(document).on('click','.analytics',function(){
      while(x <= 20){
        analytics(x);
            x++;
  }
    });
    function analytics(num){
        alert(num);
      };

Answer 4

New answer based on previous comments on previous answer.

$(document).ready(function() {
  $('.analytics').on('click', function(event) {
    analytics($(this).data("id"));
  });

  function analytics(num) {
    console.log(num);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics" data-id=1>A1 id1</div>
<div class="analytics" data-id=2>A2 id2</div>
<div class="analytics" data-id=42>A3 id42</div>
<div class="analytics" data-id=17>A4 id17</div>

In case anyone finds this question in the future.

ES6 solves this problem by allowing you to use let.

$(document).ready(function() {
  for (let i = 1; i <= 5; i++) {
    $('.analytics' + i).click(function(event) {
      analytics(i);
    });
  }

  function analytics(num) {
    console.log(num);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="analytics1">A1</div>
<div class="analytics2">A2</div>
<div class="analytics3">A3</div>
<div class="analytic4s">A4</div>

Answer 5

This does the trick for me

  for (var i=1; i<=20; i++) {

    function clickHandler(num) {    
        $(".analytics" + i).click (function(event){
            analytics(num);
        })
    }
    clickHandler(i);

  }

thanks for the link @mkaatman