suma de 4 campos

futusystem · #1 (**permalink**) 14/06/2014, 12:37

necesito obtener la suma de 4 campos con jquery, nose que estoy haciendo mal pero mientras no ingrese los 4 campos completos no me hace la suma me dice NaN, quiero que al ingresar cualquiera de los 4 campos vaya poniendo el resultado debajo, el codigo que tengo es el siguiente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
function suma(){
var num1=0;
var num2=0;
var num3=0;
var num4=0;
num1=parseFloat($("#total1").val());
num2=parseFloat($("#total2").val());
num3=parseFloat($("#total3").val());
num4=parseFloat($("#total4").val());
resul=num1+num2+num3+num4;
$("#resulCalcular").val(resul);
}
</script>

alguien que me pueda ayudar en este caso, se lo agradeceria.

utan · #2 (**permalink**) 14/06/2014, 13:42

Hola,

Si no quieres hacer condicionales en tu Javascript code, entonces en el value de tus inputs coloca una value="0" así si el usuario no pone un numero en alguno de tus inputs siempre hará la suma sin problemas, ademas hay algunos errores..

tu variable resul no esta definida en el contexto de la funcion haciéndola peligrosa, ya que se vuelve global, así que definela.

Código Javascript:

Ver originalvar resul = 0;

Ademas a mi no me funciono

Código Javascript:

Ver original$("#resulCalcular").val(resul);

así que le coloque

Código Javascript:

Ver original$("#resulCalcular").append(resul);

En ejemplo esto es lo que me sirve.

Código Javascript:

Ver original<!DOCTYPE html>
<html lang="en_US" xml:lang="en_US" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <head>
            <script type="text/javaScript">
                function suma(){
                    var num1=0
                    ,num2=0
                    ,num3=0
                    ,num4=0
                    ,resul;
                    
                    num1=parseFloat($("#total1").val());
                    num2=parseFloat($("#total2").val());
                    num3=parseFloat($("#total3").val());
                    num4=parseFloat($("#total4").val());
                    resul=num1+num2+num3+num4;
                    console.log(resul);
                    $("#resulCalcular").append(resul);
                }
            </script>
        </head>
        <body>
            <input  type="text" id="total1" value="0"/>
            <input  type="text" id="total2" value="7"/>
            <input  type="text" id="total3" value="0"/>
            <input  type="text" id="total4" value="9"/>
            <div id="resulCalcular"></div>
            <button onclick="suma();">click me</button>
        </body>
    </html>

Alexis88 · #3 (**permalink**) 14/06/2014, 14:56

Lo más seguro es que evalúes el contenido de cada caja de texto, pues el usuario puede ingresar un texto en lugar de un valor numérico y de suceder eso, no obtendrás un resultado válido.

Código Javascript:

Ver originalvar a = document.getElementById("a"), //Primera caja
    b = document.getElementById("b"), //Segunda caja
    c = document.getElementById("c"), //Tercera caja
    x, y, z, //Variables que tomarán el valor final de cada caja
    sumar = document.getElementById("sumar"), //Botón de suma
    resultado = document.getElementById("resultado"); //Muestra el resultado
 
sumar.addEventListener("click", function(){
    x = !isNaN(a.value) ? Number(a.value) : 0;
    y = !isNaN(b.value) ? Number(b.value) : 0;
    z = !isNaN(c.value) ? Number(c.value) : 0;
    resultado.innerHTML = x + y + z;
}, false);

Con la función isNaN, evalúo el contenido de cada caja, verificando que no sea un 'Not a number', es decir, que sea un número. Entonces, si se ingresa un valor no numérico, se asigna un cero, caso contrario, obtener el valor numérico del dato ingresado, pues todo valor que se ingresa en una caja de texto es tomado originalmente como una cadena, por lo que si ingreso "35" u otro valor y quiero que se evalúe como un número, lo convierto en dicho tipo de dato con el objeto Number. Incluso si no se ingresa contenido en la caja, se asignaría un cero pues dicho objeto interpreta como tal a una cadena vacía.

Saludos

utan · #4 (**permalink**) 14/06/2014, 15:29

Oupss,

Me tiene un poco atontado el haberme sacado la muela del Juicio..

La respuesta de @Alexis88 es la mas apropiada..