CODEWITHSUNDEEP
javascriptjqueryhtml
Patriotec
Patriotec

Reputation: 1144

How to add dynamic decimal to another decimal in a div using JQuery

I need to be able to add a decimal from input to a decimal in a div. Here's my code below. Right now, it's just concatenating the two number next to each other. Thanks.

EDITED: Working code

<div id="addme">5.01</div>
<input type="text" id="anumber" value="">
<button id="add">Add Number to div</button>

$('#add').click(function() {
var number = parseFloat($('#anumber').val()) || 0;
//alert(number);
$('#addme').html(function(i, val) {
return (parseFloat(val) + number).toFixed(2);
});
});

Old Non-Working Code Below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<div id="addme">5.01</div>

<input type="text" id="anumber" value="" />

<button id="add">Add Number to div</button>

<script type="text/javascript">
    $('#add').click(function(){
        var number = $('#anumber').val();
        if(number=='undefined' || number==''){
            var number=0;
        }
        //alert(number);
        $('#addme').html(function(i, val) {return val*1+number });
    });
</script>

Upvotes: 4

Views: 1791

Answers (6)

Sampson
Sampson

Reputation: 268512

// On the click event of #add
$('#add').on("click", function(){
    // n is equal to #anumber, or 0 if #anumber is blank
    var n = $('#anumber').val() || 0
    // Determine new HTML content for #addme
    $('#addme').html(function(i,v) {
        // Return the sum of n and v floated, to two decimal places
        return ( parseFloat(n) + parseFloat(v) ).toFixed(2);
    });
});​

Fiddle: http://jsfiddle.net/G8nka/1/

Upvotes: 0

VisioN
VisioN

Reputation: 145478

To convert string to number you can use the trick with + before string value. It will convert string value to numeric. This code works fine:

$('#add').click(function() {
    var number = +$('#anumber').val() || 0;
    $('#addme').html(function(i, val) {
        return (+val + number).toFixed(2);
    });
});​

DEMO: http://jsfiddle.net/K9g49/

Upvotes: 0

neu-rah
neu-rah

Reputation: 1693

in your code it seem you want the sum, not concatenation here is the code for sum, and you need to place that on a $(document).ready because your code was running before the objects were available.

    $(document).ready(function() {
        $('#add').click(function(){
            var number = $('#anumber').val();
            if(number=='undefined' || number=='')
                number=0;
            var target=$('#addme');
            target.html(1*target[0].innerHTML+1*number);
        });
    });

if you want concatenation just remove the 1*

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 93003

Since you're dealing with decimal numbers, use parseFloat():

$('#add').click(function() {
    var number = parseFloat($('#anumber').val()) || 0;
    $('#addme').html(function(i, val) {
        return parseFloat(val) + number;
    });
});​

http://jsfiddle.net/mblase75/47t7x/

UPDATE

Since you might introduce floating-point math errors (try inputing "0.6"), you should round it to a suitable number of decimal places before returning (2 if dealing with dollars and cents; 7 or more if dealing with other measurements):

$('#add').click(function() {
    var number = parseFloat($('#anumber').val()) || 0;
    $('#addme').html(function(i, val) {
        return parseFloat((parseFloat(val) + number).toFixed(9)); 
    });
});​

http://jsfiddle.net/mblase75/47t7x/1/

Upvotes: 1

Snuffleupagus
Snuffleupagus

Reputation: 6755

Just make sure you're parsing the strings to actual numeric values.

function(i, val) {return parseFloat(val)*1+parseFloat(number) }

Upvotes: 0

Yefb
Yefb

Reputation: 146

You should use parseInt() for this.

$('#addme').html(function(i, val) {return parseInt(val,10)+parseInt(number,10) });

Upvotes: 0

Related Questions