jQuery - Set input range max to variable-CodePudding

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 >3</span> total
<span >10</span> available
<span ></span>
<input type="range" min="1" value="1"  name='quantity' oninput="num.value = this.value">
<output id="num">0</output>

CodePudding user response：

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 >3</span> total
<span >10</span> available
<span ></span>
<input type="range" min="1" value="1"  name='quantity' oninput="num.value = this.value">
<output id="num">0</output>