jquery: percentage of two numbers

html, jquery, keyup, rate

Solution

use `val()` instead of `text()` for input element, use `$(function(){})` to wait DOM is ready. And also don't use same ID to elements.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#price1, #price2").change(function() { // input on change
    var result = parseFloat(parseInt($("#price1").val(), 10) * 100)/ parseInt($("#price2").val(), 10);
    $('#rate').val(result||''); //shows value in "#rate"
  })
});
</script> 
</head>
<body>
<div id="price-div1"><label>price1</label><input id="price1" type="text"></div>
<div id="price-div2"><label>price2</label><input id="price2" type="text"></div>
<div id="rate-div"><label>rate</label><input id="rate" type="text">%</div>
</body>
</html>

Problem

EDITED Thank you for everyone who offered support... the best working script I will share with you in hope that I could help others who is looking for the same solution: ``` $(document).ready(function(){ $("#price1, #price2").keyup(function() { var priceOne = parseFloat($("#price1").val()); var priceTwo = parseFloat($("#price2").val()); var rate = parseFloat($("#rate").val()); if ($("#price1").val() && $("#price2").val()){ $('#rate').val(((priceTwo - priceOne) / priceOne * 100).toFixed(2)); } }); $("#rate").keyup(function() { var priceOne = parseFloat($("#price1").val()); var rate = parseFloat($("#rate").val()); if ($("#rate").val() && $("#price1").val() && $("#price2").val()){ $('#price2').val(((priceOne * rate)/ 100 + priceOne).toFixed(2)); } }); }) ``` Also you can test it following this LINK INITIAL QUESTION: Please help to calculate the percentage between two numbers. I tried one way, but I did not succeed. Please tell me what is wrong, or I will appreciate if you can recommend other script which could help me my script: ``` <html> <head> <script type="text/javascript"> $("#rate").text(function() { var result = (parseInt(($("#price1").text(), 10) * 100)/ parseInt($("#price2").text(), 10)); if (!isFinite(result)) result = 0; return result; });? </script> </head> <body> <div id="price1"><label><input id="price1" type="text"></label></div> <div id="price2"><label><input id="price2" type="text"></label></div> <div id="rate"><label><input id="rate" type="text"></label></div> </body> </html> ```

Original source