jQuery - Set input range max to variable

Question

I want to set my max on the input to be the difference between .total and .sold. Why is the max attribute not being set on the .qty input?

$(document).ready(function() {
  var total = $(".total").html();
  var sold = $(".sold").html();
  var available = $(".available").html(total - sold);
  $(".qty").attr({
    max: available
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sold<span class="sold">3</span> total
<span class="total">10</span> available
<span class="available"></span>
<input type="range" min="1" value="1" class="qty" name='quantity' oninput="num.value = this.value">
<output id="num">0</output>

Remove available var you do not need that - just add this in attr -> max: +total - +sold — Always Helping
– Always Helping, Commented Feb 11, 2022 at 1:58
like this -> $(document).ready(function() { var total = $(".total").html(); var sold = $(".sold").html(); $(".qty").attr({ max: +total - +sold }); }); works the same way but less code is better always. — Always Helping
– Always Helping, Commented Feb 11, 2022 at 2:00

ruleboy21 · Accepted Answer · 2022-02-11 01:33:21Z

1

It's because var available = $(".available").html(total - sold); returns a jQuery collection not a number. Try this

$(document).ready(function() {
  var total = $(".total").html();
  var sold = $(".sold").html();
  var available = total - sold; // now available is a number
  $(".available").html(available);
  $(".qty").attr({
    max: available
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
sold<span class="sold">3</span> total
<span class="total">10</span> available
<span class="available"></span>
<input type="range" min="1" value="1" class="qty" name='quantity' oninput="num.value = this.value">
<output id="num">0</output>

edited Feb 11, 2022 at 1:33

answered Feb 11, 2022 at 1:28

ruleboy21

6,5215 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - Set input range max to variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related