Cómo agregar un decimal dinámico a otro decimal en un div usando JQuery

Necesito poder agregar un decimal de entrada a un decimal en un div. Aquí está mi código a continuación. En este momento, solo está concatenando los dos números uno al lado del otro. Gracias.

EDITADO: código de trabajo

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

Código antiguo que no funciona a continuación:

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

preguntado el 22 de mayo de 12 a las 19:05

6 Respuestas

Ya que estás tratando con números decimales, usa parseFloat():

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

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

ACTUALIZACIÓN

Dado que puede introducir errores matemáticos de punto flotante (intente ingresar "0.6"), debe redondearlo a un número adecuado de lugares decimales antes de regresar (2 si se trata de dólares y centavos; 7 o más si se trata de otras medidas):

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

contestado el 22 de mayo de 12 a las 20:05

Tengo que usar return (parseFloat(val) + number).toFixed(2); para mantenerlo en 2 decimales. Gracias por la ayuda. - patriotec

Deberías usar parseInt() para esto.

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

contestado el 22 de mayo de 12 a las 19:05

Siempre suministre un radix si está usando parseInt -> parseInt(val, 10) - Andreas

No quieres usar parseInt con números no enteros. - traficante de llamas

Sí, parseInt solo por Integers. Gracias por tu anotación. - Yefb

Solo asegúrese de analizar las cadenas en valores numéricos reales.

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

contestado el 22 de mayo de 12 a las 19:05

No es necesario usar *1 aquí -- parseFloat siempre devuelve un número (o NaN). - traficante de llamas

@Blazemonger Acabo de asumir el *1 era un valor de marcador de posición para otra cosa. - Snuffleupagus

Me pareció que lo estaba usando para convertir una cadena en un número, lo cual parseFloat lo hace mejor, por supuesto. - traficante de llamas

en su código, parece que desea la suma, no la concatenación, aquí está el código para la suma, y ​​debe colocarlo en un $ (documento). Listo porque su código se estaba ejecutando antes de que los objetos estuvieran disponibles.

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

si quieres concatenar simplemente elimina el 1*

contestado el 22 de mayo de 12 a las 20:05

Para convertir una cadena en un número, puede usar el truco con + antes del valor de la cadena. Convertirá el valor de cadena a numérico. Este código funciona bien:

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

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

contestado el 22 de mayo de 12 a las 20:05

Esto se bloquea cuando se ingresa una cadena no numérica. - traficante de llamas 

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

Violín: http://jsfiddle.net/G8nka/1/

contestado el 22 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.