average calculation in each card

Question

I have a simple calculation for finding the average of 2 values in a card (of around 100 cards).

The average value is not feeding into each card though, the number just disappears off each one.

Do I need to break the loop, researching it looks like the .find breaks the loop anyway...

Any ideas:

$(document).ready(function() {
  $(".card").each(function(){
    let counter = $(this).find(".counter").val();
    let countPrice = $(this).find(".counter-price").val();
    let result = counter / countPrice;
    $(this).find($(".avPrice").val(result));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card 688AttackSub">
  <img src="688%20attach%20sub.jpg" alt="688 Attack Sub">
  <div class="info-container">
    <p>688 Attack Sub</p>
    <p>1995</p>
    <div class="no-sold">
      <p>Number Sold</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-minus"><i class="fa fa-minus"></i></button>
        <input class="form-control counter" min="0" name="quantity" value="0" type="number">
        <button class="btn btn-outline-secondary btn-plus"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="sold-price">
      <p>Total Sold Price</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-neg"><i class="fa fa-minus"></i></button>
        <input class="form-control quantity counter-price" min="0" name="quantity" value="0" type="number"><button class="btn btn-outline-secondary btn-add"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="av-price">
      <p>Average Price</p><input class="form-control quantity avPrice" min="0" name="quantity" value="0" type="number">
    </div>
    <div class="last-sold">
      <p>Last Sold Date</p><input class="form-control quantity lastSoldDate" min="0" name="quantity" value="0" type="number">
      <p>Last Sold Price</p><input class="form-control quantity lastSoldPrice" min="0" name="quantity" value="0" type="number">
    </div>
  </div>
</div>
<script src="AvPrice%20calc.js" type="text/javascript"></script>
<script src="Counter.js" type="text/javascript"></script>

score 0 · Answer 1 · answered Jan 20 '21 at 21:53

Two things.

Whitin the each loop... $(this) is not what you think it is.
You should use the two .each() arguments: index and item.

Then... If the result is NaN like in a division by zero. Make sure to set the value to zero. Since NaN is falsy, you can do it with the or operator in:

$(item).find($(".avPrice").val(result||0));

$(document).ready(function() {
  $(".card").each(function(index,item){
    let counter = $(item).find(".counter").val();
    let countPrice = $(item).find(".counter-price").val();
    let result = counter / countPrice;
    $(item).find($(".avPrice").val(result||0));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card 688AttackSub">
  <img src="688%20attach%20sub.jpg" alt="688 Attack Sub">
  <div class="info-container">
    <p>688 Attack Sub</p>
    <p>1995</p>
    <div class="no-sold">
      <p>Number Sold</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-minus"><i class="fa fa-minus"></i></button>
        <input class="form-control counter" min="0" name="quantity" value="0" type="number">
        <button class="btn btn-outline-secondary btn-plus"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="sold-price">
      <p>Total Sold Price</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-neg"><i class="fa fa-minus"></i></button>
        <input class="form-control quantity counter-price" min="0" name="quantity" value="0" type="number"><button class="btn btn-outline-secondary btn-add"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="av-price">
      <p>Average Price</p><input class="form-control quantity avPrice" min="0" name="quantity" value="0" type="number">
    </div>
    <div class="last-sold">
      <p>Last Sold Date</p><input class="form-control quantity lastSoldDate" min="0" name="quantity" value="0" type="number">
      <p>Last Sold Price</p><input class="form-control quantity lastSoldPrice" min="0" name="quantity" value="0" type="number">
    </div>
  </div>
</div>

I have a counter Jquery function working in a separate sheet, would that have any effect at all? — Ginfox, Jan 23 '21 at 13:20
Just a separate JS file for the counter function, added the 2 script tags above, the counter function is https://stackoverflow.com/questions/65292530/js-events-for-loop — Ginfox, Jan 24 '21 at 10:54

average calculation in each card

1 Answers1