onkeyup is not working after first key press in javascript

Question

So I have some input fields. So there the user types quantity based on that I calculate the price and show the total price. E.g. If one item costs $500 then 2 costs 500 * 2 = 1000(total price). So I want the input each time when user press a key.

That part is working perfectly but it only works for the first key press after that it does not work. Below code I have tried.

<?php foreach ($offer_details as $key => $offer_detail) { 
  <input class="quantity" min="0" name="quantity" type="number" id="quantity-<?php echo $key; ?>" onkeyup="total_price(<?php echo $key; ?>)" max="<?php echo $units; ?>">
<?php }?>
<script type="text/javascript">
    function total_price(i){
      var quantity = parseInt(document.getElementById("quantity-" + i).value);
      if (isNaN(quantity)) {
            quantity = 0;
        }
        var sell_plants = $("#sell_plants").text();
        if (quantity >= sell_plants) {
            quantity = sell_plants;
        }
        $("#quantity-" + i).val(quantity);
        var price_per_one = $("#price_per_one").text();
        var base_currency_symbol = $("#base_currency_symbol").val();
        price_per_one = price_per_one.replace(base_currency_symbol, "");
        total_price = price_per_one * quantity;
        if(total_price == '' || typeof(total_price) == 'undefined' || isNaN(total_price)){
          total_price = 0;
        }
        $("#total_price-" + i).val(base_currency_symbol + ' ' + total_price);
    }
</script>

The problem after pressing key for the 2nd time then the above code is working and in the console it is showing total_price is not defined.

Any help will be appreciated. Thanks in advance.

Answer 1

The issue is because you declare a global total_price variable which reassigns the reference to the total_price() function.

To fix this, rename that variable, eg:

var tp = price_per_one * quantity;
if (tp == '' || typeof(tp) == 'undefined' || isNaN(tp)) {
  tp = 0;
}
$("#total_price-" + i).val(base_currency_symbol + ' ' + tp);

Note that you can make the logic simpler by coercing values and also avoiding the use of incremental ids by using jQuery's traversal methods, something like this:

$('.quantity').on('input change', function() {
  var $qty = $(this);
  var $row = $qty.closest('.row');
  var quantity = parseInt(this.value, 10) || 0;
  var sell_plants = parseInt($("#sell_plants").text(), 10) || 0;

  if (quantity >= sell_plants)
    quantity = sell_plants;

  $qty.val(quantity);

  var base_currency_symbol = $("#base_currency_symbol").val();
  var price_per_one = $row.find('.price_per_one').text().replace(base_currency_symbol, "");
  var total = (price_per_one * quantity) || 0;
  $row.find('.total').val(base_currency_symbol + ' ' + total.toFixed(2));
});

.price_per_one {
  width: 60px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sell_plants">5</div>
<input readonly type="text" id="base_currency_symbol" value="$" />

<br /><br />
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$2.50</span>
  <input type="text" readonly class="total" />
</div>
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$5.00</span>
  <input type="text" readonly class="total" />
</div>
<div class="row">
  <input class="quantity" min="0" name="quantity" type="number" max="100" />
  <span class="price_per_one">$12.50</span>
  <input type="text" readonly class="total" />
</div>