How do I handle number input changes in jQuery?
<p>I'm trying to create a checkout menu with jQuery and HTML and I am having trouble getting the input box for the item quantity to behave predictably. When I use the cursor to change the input value, the output for the 'price' variable is "NaN". When I use the arrow keys, the price updates once, but fails after the first change. How do I get the number input value, multiply it by the text (the price) in the <code>&lt;p&gt;</code> tag, and update the text every time the number is increased or decreased? I've got this much so far on my own:</p>

<p>Here is my HTML:</p>

<pre><code>&lt;input id="quantity" size="30" type="number" value="1" /&gt;
&lt;p id="total"&gt;29.99&lt;/p&gt;
</code></pre>

<p>And my JS:</p>

<pre><code>$(document).ready(function() {
  function updatePrice() {
  var num = parseInt($("#quantity").val());
  var price = (num) * parseFloat($("#total").text());
  var total = price.toFixed(2);
  $("#total").replaceWith(total);
}
$(document).on("change, keyup, input", "#quantity", updatePrice);
});
</code></pre>

<p><a href="https://jsfiddle.net/k5om53o8/" rel="nofollow">JS Fiddle.</a></p>