Error NaN en Javascript

nacho_mim · #1 (**permalink**) 08/09/2012, 12:09

Hola Amigos del Foro tengo un problema con la siguiente función en Javascript

Código HTML:

<script>
function calculo(cantidad,precio,inputtext,totaltext){

	cantidad - entero con la cantidad
	precio - entero con el precio
	inputtotal - nombre del elemento del formulario donde ira el total
	
	// Calculo del subtotal
	subtotal = precio*cantidad;
	inputtext.value=subtotal;
	
	//Actualizar el total
	
	total = eval(totaltext.value);
	totaltext.value = total + subtotal;
}

</script>

Donde ingreso la cantidad es el siguiente:

Código PHP:

 
<input name="can1" type="text" id="can1" value="<?php if (isset($_SESSION['can1'])){ echo $_SESSION['can1']; } ?>" size="10" onChange="calculo(this.value,val1.value,tot1,total);" />

Donde Toma el valor unitario

Código PHP:

 
<input name="val1" type="text" id="val1" value="<?php echo $_SESSION['val1']; ?>" size="10" />

El total se registra en otro TextBox llamado total.

La función me multiplica bien, pero al momento de dar el Total da el error NotanNumber.

Espero me puedan ayudar, muchas gracias.

emprear · #2 (**permalink**) 08/09/2012, 18:00

Código Javascript:

Ver originalfunction calculo(cantidad,precio,inputtext,totaltext){

una función que recibe parámetros, hasta ahi vamos bien.

Código Javascript:

Ver originalcantidad - entero con la cantidad
    precio - entero con el precio
    inputtotal - nombre del elemento del formulario donde ira el total

ahi, ya empezamos con el desaguisado. Que es todo eso?, un comentario, una intención, variables mal declaradas?

Código PHP:

Ver original<input name="can1" type="text" id="can1" value="<?php if (isset($_SESSION['can1'])){ echo $_SESSION['can1']; } ?>" size="10" onChange="calculo(this.value,val1.value,tot1,total);" />

al momento de hacer onchange, que se supone representan val1.value, tot1 y total?

Hasta tanto no corrijas y entiendas lo que te comento, cualquier otro tipo de ayuda carece de sentido

nacho_mim · #3 (**permalink**) 09/09/2012, 15:58

Cita:

Iniciado por emprear

Código Javascript:

Ver originalfunction calculo(cantidad,precio,inputtext,totaltext){

una función que recibe parámetros, hasta ahi vamos bien.

Código Javascript:

Ver originalcantidad - entero con la cantidad
         /* Parametros:
    precio - entero con el precio
    inputtotal - nombre del elemento del formulario donde ira el 
        */
total

ahi, ya empezamos con el desaguisado. Que es todo eso?, un comentario, una intención, variables mal declaradas?

Código PHP:

Ver original<input name="can1" type="text" id="can1" value="<?php if (isset($_SESSION['can1'])){ echo $_SESSION['can1']; } ?>" size="10" onChange="calculo(this.value,val1.value,tot1,total);" />

al momento de hacer onchange, que se supone representan val1.value, tot1 y total?

Hasta tanto no corrijas y entiendas lo que te comento, cualquier otro tipo de ayuda carece de sentido

Perdón por eso, lo primero son comentarios, era para explicar pero olvidé los /* */

value,val1.value,tot1,total Son las variables que se envían a la función

val1.value es la variable precio
tot1.value es la variable subtotal
total es el nombre del textbox donde se mostrará la suma final

La función lo que hace es obtener todos los valores de los los textbox can1,can2,can3...etc. (cantidad) y cada uno multiplicarlos por los textbox val1,val2,val3...etc. (valores) para al final todo eso almacenarlo en la variable total y mostrarla en el textbox total.

No se si me expliqué bien, cualquier duda hazmela saber por favor, gracias por tu tiempo.
Saludos.

emprear · #4 (**permalink**) 09/09/2012, 19:06

ok. empecemos por analizar esto
todos los valores desde un form en javascript se reciben como cadenas por lo tanto las operaciones aritméticas te resultan en errores, deberías utilizar parseInt, o parseFloat para transformar dichas cadenas '45367' en números 45367

Te pongo un ejemplo (que aclaro tiene muchas imperfecciones), pero para que te des una idea

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function totales(elid){
var identificador = elid.split('_');
var registro = identificador[1];
if(document.getElementById('cantidad_'+registro).value == ''){
var cantidad = 0;
}else{
var cantidad = parseInt(document.getElementById('cantidad_'+registro).value);
}
var valor = parseInt(document.getElementById('valor_'+registro).value);
var total = cantidad*valor;
document.getElementById('total_'+registro).value = total;
}
 
//]]>
</script>
 
</head>
<body>
<form action="#">
<table>
<tr>
<td><input type="text" id="cantidad_1" onkeyup="totales(this.id)" /></td><td><input type="text" id="valor_1" onkeyup="totales(this.id)" /></td><td><input type="text" id="total_1" /></td>
</tr>
</table>
</form>
</body>
</html>

fijate que la suma solo se produce si tanto cantidad como contienen números. Y yo usaría el evento onkeyup en lugar de onchange.
Ademá no aclarás si el campo cantidad es editable, por ejemplo cantidad 6 precio 3 te pòne 18, pero si modificas cantidad y no volvés al campo precio a cambiar algo, no te arregla el total, por lo que la función debería hacerse siempre en los 2 campos supongo

nacho_mim · #5 (**permalink**) 10/09/2012, 12:54

Cita:

Iniciado por emprear

ok. empecemos por analizar esto
todos los valores desde un form en javascript se reciben como cadenas por lo tanto las operaciones aritméticas te resultan en errores, deberías utilizar parseInt, o parseFloat para transformar dichas cadenas '45367' en números 45367

Te pongo un ejemplo (que aclaro tiene muchas imperfecciones), pero para que te des una idea

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function totales(elid){
var identificador = elid.split('_');
var registro = identificador[1];
if(document.getElementById('cantidad_'+registro).value == ''){
var cantidad = 0;
}else{
var cantidad = parseInt(document.getElementById('cantidad_'+registro).value);
}
var valor = parseInt(document.getElementById('valor_'+registro).value);
var total = cantidad*valor;
document.getElementById('total_'+registro).value = total;
}
 
//]]>
</script>
 
</head>
<body>
<form action="#">
<table>
<tr>
<td><input type="text" id="cantidad_1" onkeyup="totales(this.id)" /></td><td><input type="text" id="valor_1" onkeyup="totales(this.id)" /></td><td><input type="text" id="total_1" /></td>
</tr>
</table>
</form>
</body>
</html>

fijate que la suma solo se produce si tanto cantidad como contienen números. Y yo usaría el evento onkeyup en lugar de onchange.
Ademá no aclarás si el campo cantidad es editable, por ejemplo cantidad 6 precio 3 te pòne 18, pero si modificas cantidad y no volvés al campo precio a cambiar algo, no te arregla el total, por lo que la función debería hacerse siempre en los 2 campos supongo

Bien, soy muy nuevo en ésto de Javascript, por lo que entiendo tu ejemplo, pero no sé como aplicarlo.
El único dato editable es la cantidad ninguno mas, precio se obtiene de la base de datos, asi que mientras voy modificando la cantidad, automaticamente se multiplican por el precio y dan los subtotales (la operación la realiza bien), pero la suma de todos los bubtotales no.

La función funciona bien, a excepción de la suma total y es muy poco código, por eso no quiero cambiarlo, si pudieses explicarme un poco que modificar, te lo agradecería.

Gracias.

Dradi7 · #6 (**permalink**) 10/09/2012, 13:27

pero cual es la formula de como estas calculando el total

nacho_mim · #7 (**permalink**) 10/09/2012, 14:37

Cita:

Iniciado por Dradi7

pero cual es la formula de como estas calculando el total

En la función:

Código HTML:

<script>
function calculo (cantidad,precio,inputtext,totaltext){
	/* Parametros:
	cantidad - entero con la cantidad
	precio - entero con el precio
	inputtotal - nombre del elemento del formulario donde ira el total
	*/
	// Calculo del subtotal

	subtotal = (precio*cantidad);
	inputtext.value=subtotal;
	
	//Actualizar el total
	// Utilizamos el eval. Ya que el valor es un texto y si lo tratamos como tal es como si estuviesemos manipulando una cadena.
	
	total = eval(totaltext.value);
	totaltext.value = total + subtotal;
}
</script>

Se suma agregando los valores de cada subtotal

total = eval(totaltext.value);
totaltext.value = total + subtotal;

Supongo que a eso va tu pregunta
Saludos y gracias.

Dradi7 · #8 (**permalink**) 10/09/2012, 14:41

Primero verifica si tu totaltext devuelve vacio o no, segundo porque usas eval???

no puedes usar solamente parseInt o parseFloat

Código Javascript:

Ver originaltotal = isNaN(totaltext.value) ? 0 : parseFloat(totaltext.value);
totaltext.value = total + subtotal;

Verifica tambien si el subtotal te devuelve NaN o no.

Saludos

Tecna · #9 (**permalink**) 10/09/2012, 16:40

Buenas,

están ocurriendo dos cosas diferentes:

en javascript cualquier variable puede contener cualquier tipo de dato y pueden variar de tipo según en el contexto en que se utilicen. Si intentamos hacer una operación con una variable que no tiene el tipo de dato adecuado, intentará primero convertir el dato para poder hacer la operación. Por eso en la multiplicación no hay problema porque es un operador que sólo se utiliza con tipos numéricos, se convierten a números y se hace la multiplicación, pero con la suma se pueden usar números y cadenas con resultados diferentes y además las cadenas tienen preferencia a la hora de hacer una conversión automática, si añadimos además como ya se ha dicho, que todo lo que hay en un fichero html es texto incluido el valor de los campos de texto de los formularios, el resultado que se obtendría sería la concatenación de los valores y no la suma. Y esto nos lleva al segundo problema, ya que según comentas el resultado es NaN y esto es como ya también se ha mencionado por el uso de eval.

El comportamiento de eval es un tanto particular, en el caso de que la expresión que se evalue no devuelva ningún valor devuelve undefined que en un entorno numérico se traduce por NaN, en tu ejemplo, la primera vez que evalues totaltext.value te dará undefined si no has definido un valor inicial para ese campo y sumar ese valor con un número daría NaN. El resultado sería el esperado si la suma la hubieras hecho dentro de eval porque la suma se evaluaría como parte de la expresión antes de devolver el resultado con lo que total ya no valdría undefined y totaltext.value no sería NaN.

nacho_mim · #10 (**permalink**) 11/09/2012, 17:28

Gracias por sus respuestas.

Bien resulta que apliqué el cambio:

total = isNaN(totaltext.value) ? 0 : parseFloat(totaltext.value);

y ahora me suma los totales, pero solamente si los ingreso manualmente.

Si se fijan, hay muchos buttons al lado de codigo que llaman a una función php para buscar los datos y el precio, el calculo se pierde al lamar a la función, estimo yo debido a la recarga del formulario...

Alguna idea ? :(