jquery: percentage of two numbers

后端未结

关注

 5  538

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 f

相关标签:

5条回答

深忆病人

2021-01-12 16:51

May be you want to use parseFloat() instead of parseInt()

    <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>

    <script type="text/javascript">
        $(function() {
            $("#price1, #price2").change(function() {
                var result = parseFloat(parseFloat($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10);
                $('#rate').val(result||'');
            })
        });
    </script>

0 讨论(0)

独厮守ぢ

2021-01-12 16:53

Use like this,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
$("#rate").text(function() {
    var result = (parseFloat(($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10));
    if (!isFinite(result)) result = 0;
    return result;
});
</script> 
<body>
<div class="price1"><label><input id="price1" type="text"></label></div>
<div class="price2"><label><input id="price2" type="text"></label></div>
<div class="rate"><label><input id="rate" type="text"></label></div>
</body>
</html>

Changed div class, and get input value by val()

0 讨论(0)

死守一世寂寞

2021-01-12 16:58
Check this fiddle

http://jsfiddle.net/j3WY3/5/

Have made some corrections:
- removed ? as everyone says.
- change .text() to .val()
- both div and input had same id
0 讨论(0)
发布评论:

提交评论
- 加载中...

不思量自难忘°

2021-01-12 17:02

You have few problems,

? after closing parenthesis of text function.
Repeated id price1 and price2 for both div and textboxes
If you want input from textbox then you should use val() instead of text()

Fixed you code

Live Demo

HTML

<div id="dprice1"><label><input id="price1" type="text" value="80" /></label></div>
<div id="dprice2"><label><input id="price2" type="text" value="100" /></label></div>
<div id="drate"><label><input id="rate" type="text"></label></div>
<input id="btnCal" type="button" value="Calculate">

Javascript

$("#btnCal").click(function() {
    $("#rate").val(function() {
        var result = parseInt($("#price1").val()) * 100 / parseInt($("#price2").val());
        if (!isFinite(result)) result = 0;
        return result;
    });
});

0 讨论(0)

遥遥无期

2021-01-12 17:08

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>

0 讨论(0)