jQuery using an keyup function in a loop

Question

Here is the situation,

I have multiple fields with different field names based on the months.

Here are the sample field names:

     <input type="text" name="month-numbers" id="month-revenue-1" /> 
     <input type="text" name="month-numbers" id="month-revenue-2" /> 
     <input type="text" name="month-numbers" id="month-revenue-3" /> 
     ..........
     <input type="text" name="month-numbers" id="month-revenue-12" />

In my javascript, I have the actual array created in javascript:

     var actualMonths = [1,2,3,4,5,6,7,8,9,10,11,12];

Now, here is my loop:

      for (i=0;  i < actualMonths.length; i++) {
           $('input#month-revenue-'+month).keyup(function(){
                revenue = $(this).val();
                margin = $('input#month-margin-'+month).val();
                value = (margin / 100) * revenue;
                value = value.toLocaleString("en-US");
                $('#month-price-'+month).html(value);
           });
      }

It is getting the data from the correct field, however, within the keyup function, it seems to be trying to place the data at the end of the loop. Why is that happening?

My expected result was to have each field calculated differently. For example, month-revenue-1 should be calculating the values.

This is a very weird way of structuring the logic. It's too redundant. Instead, look into attaching your listener to a class so that it becomes general for all the inputs you want, then pass the event. You can then use `$(this)` to reference the current element. `$(this)` will have all jQuery methods available to it. If you don't really need that, you can also do `event.target`, which is the plain JS way of referencing the current element. Why do I mention both? Because jQuery objects are a little "heavier" and not always necessary. Find the perfect silverlining. — Martin, Oct 20 '21 at 19:42
Does this answer your question? https://stackoverflow.com/questions/15864307/one-jquery-change-event-on-multiple-elements — isherwood, Oct 20 '21 at 19:44

derloopkat · Accepted Answer · 2021-10-20T20:08:30.553

If you attach the keyup handler function to a parent html element, the same function can handle the event for all children. Use e.target to know which input triggered the event.

$('#months').keyup(function(e) {
  let month = e.target.id.split('-')[2];
  let revenue = $(e.target).val();
  let margin = $('input#month-margin-' + month).val();
  let value = (Number(margin) / 100) * Number(revenue);
  $('#month-price-' + month).html(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="months">
  <input type="text" name="month-numbers" id="month-revenue-1" />
  <input type="text" name="month-margins" id="month-margin-1" />
  <span id="month-price-1"></span>
  <br />
  <input type="text" name="month-numbers" id="month-revenue-2" />
  <input type="text" name="month-margins" id="month-margin-2" />
  <span id="month-price-2"></span>
</div>

jQuery using an keyup function in a loop

1 Answers1