Как добавить динамическое десятичное число в другое десятичное число в div с помощью JQuery

Question

Мне нужно уметь добавлять десятичное число от ввода до десятичной в div. Вот мой код ниже. Прямо сейчас, это просто конкатенация двух чисел рядом друг с другом. Благодарю.

Редакция: Рабочий код

<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); 
}); 
}); 

Старый Non-Рабочий код ниже:

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

Answer 1

Так как вы имеете дело с десятичными числами, используйте 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

Поскольку вы можете ввести математические ошибки с плавающей запятой (попробуйте ввести «0,6»), вы должны округлить его до подходящего числа десятичных знаков перед возвратом (2, если иметь дело с долларами и центами; 7 или более, если дело с другими измерениями):

$('#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/

Answer 2

Вы должны использовать ParseInt() для этого.

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

Answer 3

Просто убедитесь, что вы разбираете строки до фактических числовых значений.

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

Answer 4

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

Answer 5

Для преобразования строки в номер вы можете использовать трюк с + прежде, чем значение строки. Он преобразует значение строки в числовое. Этот код работает отлично:

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

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

Answer 6

в вашем коде, кажется, вы хотите, сумма, не конкатенации здесь код для суммы, и вы должны поместить что на $ (документ). Уже потому, что ваш код работал до того, как объекты были доступны.

$(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); 
     }); 
    }); 

если вы хотите конкатенации просто удалить 1 *