[SOLUCIONADO] "var" no funciona como número

sevillano665 · #1 (**permalink**) 22/05/2014, 10:22

Hola! mi problema es que he hecho una función con "var kgTotales = 0". Pero cuando sumo "kgTotales = kgTotales + 2" el resultado es "02", esto devuelve un string y no un número. Uso la variable en un bucle así que el resultado es "kgTotales = 02...." y los números que le siguen son los que quiero sumar.

Este es el código:

Código:

<script type="text/javascript"> 
          function multiplicar() {
          	var contador1;
          	var contador2 = 2;
          	var contador3 = 1;
          	var n1;
          	var n2; 
          	var id1;
          	var id2;
          	var id3;
          	var kgTotales = 0;
          	var precioTotal = 0;
          	
          	for(contador1=1; contador1 < 60; (contador1)+2){
          		id1="n" +(contador1);
          		id2="n" +(contador2);
          		id3="result" +(contador3);
          		
          		contador1=(contador1)+2;
          		contador2=(contador2)+2;
          		contador3++;          		
          		
          		
          		n1=document.getElementById(id1).value;
          		
          		n2=document.getElementById(id2).value;
          		
          			
          	     	     	          	
          	        	
          	document.getElementById(id3).value = (n1*n2);
          	
          	
          	precioTotal = precioTotal + (n1*n2);    
          	
          	kgTotales = kgTotales+n2;      	
          	
          	document.getElementById("precioTotal").value = precioTotal + " Euros";
          	document.getElementById("kgTotales").value = kgTotales + " Kg";
          	
          	          	
          	
          	
          	}
          	          	          	
        
          	
          	} </script>

Y este es el resultado:

No lo entiendo porque la variable "precioTotal" tiene la misma función, la de sumar, y suma bien los números y no los convierte a String. A ver si alguien puede ayudarme.

Saludos!

chuidiang · #2 (**permalink**) 22/05/2014, 10:36

Hola:

var kgTotales es un numero, el problema es que no estás sumando 2, sino "2" como string, ya que n2=document.getElementById(id2).value; te devuelve un string. Conviértelo a número antes de sumarlo a kgTotales.

cosas como n1*n2, aunque ambos sean string, funcionan porque el * no está definido para string, así que javascript los convierte a numeros. Sin embargo, el + sí está definido para string, así que simplemente concatena y no hace la conversión. Es más, si puede, convierte el número en cadena antes que la cadena en número.

Se bueno.

sevillano665 · #3 (**permalink**) 22/05/2014, 11:13

Gracias por la respuesta! Pero no sé si tengo muy claro cómo pasar la var n2 a un número. He puesto esto pero no funciona:

Código:

var n3 = parseFloat(n2);
kgTotales = (kgTotales+n3);

Pero me pone como resultado "NaN"

Saludos!

Italico76 · #4 (**permalink**) 22/05/2014, 12:03

parseFloat() si tiene decimales... si son numeros enteros como cantidades usar: parseInt()

Código Javascript:

Ver originaln1=parseInt(document.getElementById(id1).value);  // aqui
                
            n2=parseInt(ocument.getElementById(id2).value);  // y aqui
                                                                        
                        
            document.getElementById(id3).value = (n1*n2);
            
            precioTotal = precioTotal + (n1*n2);    
            
            kgTotales = kgTotales+n2;

Mira DONDE debes hacer los parseXXX() para no arrastrar el error

sevillano665 · #5 (**permalink**) 22/05/2014, 12:31

Necesito los decimales así que he usado parseFloat() donde me has indicado y he inicializado kgTotales y precioTotal a "0.0", pero ahora me pone "NaN" tanto para kgTotales como para precioTotal. Así que me sigue sin salir el resultado

Italico76 · #6 (**permalink**) 22/05/2014, 13:08

La puedes estar embarrando por otro lado si haces:

Código Javascript:

Ver originalvar precioTotal = '0.0';

Por que no lo dejastes en = 0 ?

---
Sino colocas el HTML... la complicas porque no podemos debuguear

snakebryant · #7 (**permalink**) 22/05/2014, 15:32

Buenas!

Yo creo que el tema es que has de sumar cosas del mismo tipo, es decir, en las siguientes lineas:

Código:

precioTotal = precioTotal + (n1*n2);    
            
kgTotales = kgTotales+n2;

tendrías que hacer algo así:

Código:

precioTotal = parseInt(precioTotal) + (n1*n2);    
            
kgTotales = parseInt(kgTotales)+n2;

Creo que por eso te dice NaN not a number, por que has de operar variables del mismo tipo.

Espero que te ayude!

Saludos!

sevillano665 · #8 (**permalink**) 23/05/2014, 03:22

Este es el código que me queda de la función:

Código:

<script type="text/javascript"> 
          function multiplicar() {
          	var contador1;
          	var contador2 = 2;
          	var contador3 = 1;
          	var n1;
          	var n2; 
          	var id1;
          	var id2;
          	var id3;
          	var kgTotales = 0;
          	var precioTotal = 0;
          	
          	for(contador1=1; contador1 < 60; (contador1)+2){
          		id1="n" +(contador1);
          		id2="n" +(contador2);
          		id3="result" +(contador3);
          		
          		contador1=(contador1)+2;
          		contador2=(contador2)+2;
          		contador3++;          		
          		
          		
          		n1=parseFloat(document.getElementById(id1).value);
          		
          		n2=parseFloat(document.getElementById(id2).value);

                        document.getElementById(id3).value = (n1*n2);
          	
          	
          	precioTotal = (precioTotal) + (n1*n2);    
          	
          	kgTotales = (kgTotales)+n2;
          	   	
          	
          	document.getElementById("precioTotal").value = precioTotal + " Euros";
          	document.getElementById("kgTotales").value = kgTotales + " Kg";

}
}
</script>

Y este es el HTML, aunque no creo que haya ningún problema ahí, ya que la tabla funciona bien excepto para los kgTotales. He quitado algunas columnas de la tabla del HTML porque el mensaje era muy largo y no podía enviarlo, si hay un salto en los "id" es por eso.

Código HTML:

<table border="1">
            	<tr>
            		<td id="id1">Producto</td>
            		<td id="id1">Precio/Kg</td>
            		<td id="id1">Kg a pedir</td>
            	</tr>
            	<tr>
            		<td id="id1">Br&oacutecoli</td>
            		<td id="id1">
            			<input type="text" name="n1" id="n1" onkeyup="multiplicar()">						
            		</td>
            		<td id="id1">
            			<div id="div_kgBrocoli">  
                        	<input type="text" name="n2" id="n2"  onkeyup="multiplicar()">
            			</div>
            		</td>
            		<td id="id1"><input type="text" name="r1" id="result1" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Cereza</td>
            		<td id="id1"><input type="text" name="n3" id="n3"  onkeyup="multiplicar()"></td>
            		<td id="id1">
            			<input type="text" name="n4" id="n4" onkeyup="multiplicar()"></td>
            		</td>
            		<td id="id1"><input type="text" name="r2" id="result2" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Chirimoya</td>
            		<td id="id1"><input type="text" name="n3" id="n5"  onkeyup="multiplicar()"></td>
            		<td id="id1">
            			<div id="div_kgChirimoya">  
                        	<input type="text" name="n3" id="n6"   onkeyup="multiplicar()">
            			</div>
            			</td>
            		<td id="id1"><input type="text" name="r1" id="result3" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Tomate</td>
            		<td id="id1"><input type="text" name="n3" id="n43"  onkeyup="multiplicar()"></td>
            		<td id="id1">
            			<div id="div_kgTomate">  
                        	<input type="text" name="n3" id="n44" onkeyup="multiplicar()">
            			</div>
            			</td>
            		<td id="id1"><input type="text" name="r1" id="result22" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Uva</td>
            		<td id="id1"><input type="text" name="n3" id="n45"  onkeyup="multiplicar()"></td>
            		<td id="id1">
            			<div id="div_kgUva">  
                        	<input type="text" name="n3" id="n46" onkeyup="multiplicar()">
            			</div>
            			</td>
            		<td id="id1"><input type="text" name="r1" id="result23" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Uva negra</td>
            		<td id="id1"><input type="text" name="n3" id="n47"  onkeyup="multiplicar()"></td>
            	<td id="id1">
            			<div id="div_kgUvaNegra">  
                        	<input type="text" name="n3" id="n48" onkeyup="multiplicar()">
            			</div>
            			</td>
            		<td id="id1"><input type="text" name="r1" id="result24" onfocus = "this.blur()"></td>
            	</tr>
            	<tr>
            		<td id="id1">Zanahoria</td>
            		<td id="id1"><input type="text" name="n3" id="n49"  onkeyup="multiplicar()"></td>
            		<td id="id1">
            			<div id="div_kgZanahoria">  
                        	<input type="text" name="n3" id="n50" onkeyup="multiplicar()">
            			</div>
            			</td>
            		<td id="id1"><input type="text" name="r1" id="result25" onfocus = "this.blur()"></td>
            	</tr>
            	<td id="id1" colspan="2" align="center">Kg Totales:
            		<input type="text" name="n3" id="kgTotales"  onkeyup="multiplicar()">
            	</td>
            	<td id="id1" colspan="2" align="center"> Precio Total:
            		<input type="text" name="n3" id="precioTotal"  onkeyup="multiplicar()">
            	</td>
            </table>

Convierto n1 y n2 a Float pero ahora ni me muestra el precioTotal que antes sí mostraba, me pone que no es un número. La columna donde están 3 y 6 son los KG y la última los precios.

Saludos!

chuidiang · #9 (**permalink**) 23/05/2014, 04:01

Posiblemente esto

n2=parseFloat(document.getElementById(id2).value);

te está devolviendo NaN en algún momento. Viendo la tabla, seguramente son las casillas vacías. Verifica que no están vacías antes de convertirlas a float.

Se bueno.

sevillano665 · #10 (**permalink**) 25/05/2014, 10:07

Cierto, es por culpa del NaN que no me devuelve el precio total, pero no sé como poner todos los valores a 0 si no se introduce nada. He probado poniendo 0 como valor por defecto en las cajas de texto de los resultados de las multiplicaciones pero no sirve, ya que cuando introduzco un número en cualquier casilla se me ponen todos los resultados como "NaN" y no realiza la suma. He probado varias cosas pero ninguna funciona, alguna idea?

Saludos!

Italico76 · #11 (**permalink**) 25/05/2014, 11:59

Cita:

Iniciado por sevillano665

Cierto, es por culpa del NaN que no me devuelve el precio total, pero no sé como poner todos los valores a 0 si no se introduce nada. He probado poniendo 0 como valor por defecto en las cajas de texto de los resultados de las multiplicaciones pero no sirve, ya que cuando introduzco un número en cualquier casilla se me ponen todos los resultados como "NaN" y no realiza la suma. He probado varias cosas pero ninguna funciona, alguna idea?

Saludos!

Te la di hace rato: postea el HTML tambien...y te lo resolvemos en 1 min

sevillano665 · #12 (**permalink**) 25/05/2014, 12:35

Cita:

Iniciado por Italico76

Te la di hace rato: postea el HTML tambien...y te lo resolvemos en 1 min

El HTML está ya posteado. De todas formas ya lo solucioné:

Puse el parseFloat solo en esta línea:

Código:

kgTotales = (kgTotales)+ parseFloat(n2);

Y en los input de la columna de los Kg puse:

Código:

<input type="text" name="n2" id="n2" value="0"  onblur="if(value=='') value = '0'" onfocus="if(value=='0') value = ''" onkeyup="multiplicar()">

Haciendo que el valor por defecto sea "0" si no se introduce nada o si se borra el interior de la caja de texto, por lo que siempre se podrá realizar la suma a no ser que se introduzca una letra, pero eso ya es otro tema.

chuidiang · #13 (**permalink**) 26/05/2014, 01:18

También te podría ayudar la función isNaN() http://www.w3schools.com/jsref/jsref_isnan.asp y poner unos if antes de usar esos números según sean o no NaN

Se bueno.