javascript - jQuery - Simple divide two values - Stack Overflow

admin管理员组

文章数量:1315346

I am trying to get different values from my input fields, divide them and show the result like this:

<input type="text" class="ad-title calculate form-control" name="budget" id="budget" value="" placeholder="Enter a daily budget in USD">

<input type="text" class="form-control calculate" id="ppc" name="ppc" value="" placeholder="">

My simple jQuery:

$(document).ready(function() {    
    $(".calculate").bind("keyup change", function(e) {
         var budget = parseFloat($("#budget").val());
         var ppc = parseFloat($("#ppc").val());
         var value = ppc / budget;
        $("#sum").text(value);
    });
});

However, in my #sum div, all I see is: NaN

What am I doing wrong?

I am trying to get different values from my input fields, divide them and show the result like this:

<input type="text" class="ad-title calculate form-control" name="budget" id="budget" value="" placeholder="Enter a daily budget in USD">

<input type="text" class="form-control calculate" id="ppc" name="ppc" value="" placeholder="">

My simple jQuery:

$(document).ready(function() {    
    $(".calculate").bind("keyup change", function(e) {
         var budget = parseFloat($("#budget").val());
         var ppc = parseFloat($("#ppc").val());
         var value = ppc / budget;
        $("#sum").text(value);
    });
});

However, in my #sum div, all I see is: NaN

What am I doing wrong?

• javascript
• jquery

Share Improve this question Follow edited Jun 29, 2015 at 20:59 oliverbj asked Jun 29, 2015 at 20:56 oliverbjoliverbj 6,0623030 gold badges9696 silver badges198198 bronze badges 5

• I see it's money, are you putting in dollar signs in the input? – 9Deuce Commented Jun 29, 2015 at 20:58
• @9Deuce No, only numbers. – oliverbj Commented Jun 29, 2015 at 20:59
• Does the decimal point of the currency value match your langauge settings ? – collapsar Commented Jun 29, 2015 at 21:00
• @cloudworks that doesn't change anything, unfortunately. – oliverbj Commented Jun 29, 2015 at 21:04
• hey do you really need keyup? it's acting funny with keyevents! – Sudhansu Choudhary Commented Jun 29, 2015 at 21:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You could so this:

$(document).ready(function() {    
    $(".calculate").bind("keyup change", function(e) {
        var budget = parseFloat($("#budget").val()) || 0;
        var ppc = parseFloat($("#ppc").val()) || 0;

        var value = ppc / budget;

        if (!isNaN(value) && value !== Infinity) {
            $("#sum").text(value);
        }
    });
});

You may have to alter it to match your needs. For example, we'll get NaN or Not a Number when dividing by zero so handle that. Maybe you never want to show 0 so maybe handle that or make the default for budget 1. It depends on how you want it to work.

JSFiddle: http://jsfiddle/f0t45c7x/1

Convert your values to numbers using the + unary operator instead of using parseFloat :

$(document).ready(function () {
    $(".calculate").bind("keyup change", function (e) {
        var budget = +$("#budget").val();
        var ppc = +$("#ppc").val();
        if(!budget || !ppc) return false; // Wait till both values are set
        var value = ppc / budget;
        $("#sum").text(value);
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" class="ad-title calculate form-control" name="budget" id="budget" value="" placeholder="Enter a daily budget in USD">
<input type="text" class="form-control calculate" id="ppc" name="ppc" value="" placeholder="">
<div id="sum"></div>

Change this line:

var ppc = parseFloat($("#ppc").val());

to

var ppc = parseFloat($("#ppc").val()) || 0;

You do not need to bind "change" event, this should do,

$(document).ready(function() {    
    $(".calculate").bind("keyup", function(e) {
        var budget = parseFloat($("#budget").val()) || 0;
        var ppc = parseFloat($("#ppc").val()) || 0;

        var value = (ppc / budget);
       // alert(value);
        if (!isNaN(value) && value != Infinity) {
            $("#sum").text(value);
        }
        else{
            $("#sum").text("0")
        }
    });
});

本文标签： javascriptjQuerySimple divide two valuesStack Overflow