Foros del Web » Programando para Internet » Javascript »

Problema con concatenación

 Estas en el tema de Problema con concatenación en el foro de Javascript en Foros del Web. Hola estoy haciendo una página web dónde hay varios platos a elegir cada uno con un precio, y quiero que si se escogen 2 platos ...
  #1 (permalink)  
Antiguo 09/04/2010, 11:41
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Pregunta Problema con concatenación
Hola estoy haciendo una página web dónde hay varios platos a elegir cada uno con un precio, y quiero que si se escogen 2 platos se me sumen los precios en un text, pero en vez de sumarse se concatenan, y seguramente es algo muy sencillo pero estoy bloqueado xD Aquí os dejo el script:
Código PHP:
<script>
  var precio1 = 4
  var precio2 = 5.25
  var precio3 = 7
  var precio4 = 12.4
  var precio5 = 15
  var preciototal
 
 function precio(){
 
  if(document.menu.opcion1.checked==true){
   preciototal+=precio1;
   document.getElementById("preciototalbox").value+=precio1;
   }
 
  if(document.menu.opcion2.checked==true){
   preciototal+=precio2;
   document.getElementById("preciototalbox").value+=precio2;
   }

  if(document.menu.opcion3.checked==true){
   preciototal+=precio3;
   document.getElementById("preciototalbox").value+=precio3;
   }

  if(document.menu.opcion4.checked==true){
   preciototal+=precio4;
   document.getElementById("preciototalbox").value+=precio4;
   }

  if(document.menu.opcion5.checked==true){
   preciototal+=precio5;
   document.getElementById("preciototalbox").value+=precio5;
   }
  } 
 
 function preciofinal(){
  alert("El precio total es de "+preciototal+" euros")  
 } 
 </script> 
Gracias y saludos
  #2 (permalink)  
Antiguo 09/04/2010, 12:00
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años
Puntos: 1517
Respuesta: Problema con concatenación
Usa la función eval.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 09/04/2010, 13:18
 
Fecha de Ingreso: abril-2010
Ubicación: df
Mensajes: 26
Antigüedad: 14 años
Puntos: 9
Respuesta: Problema con concatenación
Lo que sucede en este caso es que el valor del campo es un texto, por lo cual al usar + concatena los valores, por que alguien cuando decidio crear javascript uso el operador + para sumar y concatenar.

Puedes resolverlo usando un parseFloat o parseInt y una suma normal, usar eval puede traer muchos problemas.
  #4 (permalink)  
Antiguo 09/04/2010, 13:36
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Vale muchas gracias a los dos pero soy nuevo en esto si me pudierais explicar como va eso del eval y el parseFloat y el parseInt, pq aunque solo uno me servira para mas adelante. Gracias (:
  #5 (permalink)  
Antiguo 09/04/2010, 13:48
 
Fecha de Ingreso: abril-2010
Ubicación: df
Mensajes: 26
Antigüedad: 14 años
Puntos: 9
Respuesta: Problema con concatenación
Eval tiene el problema de ejecutar el código que le mandes, por lo cual yo podría cambiarle el valor a una variable por código y entonces eso se convierte en un problema de seguridad.

Cambiar el valor de una variable desde la consola de firefox.

Mientras que a ti lo que te interesa es hacer algo como something.value = parseFloat(something.value) + parseFloat(precio)

Donde si alguien pasa código a parseFloat no tendrás problemas de seguridad.

En resumen, nunca uses eval a menos de que puedas garantizar que lo que va a entrar a la función sea controlado por ti.
  #6 (permalink)  
Antiguo 09/04/2010, 14:06
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Entonces quedaría algo así como:

Código PHP:
  if(document.menu.opcion1.checked==true){
  preciototal+=precio1; document.getElementById("preciototalbox").value=parseFloat(document.getElementById("preciototalbox").value)+parseFloat(precio1); 
? Gracias
  #7 (permalink)  
Antiguo 09/04/2010, 14:33
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
He estado probando y si en el parseFloat() pongo el something.value me devuelve NaN, por tanto habría que introducir un número pero el precio va a depender de qué productos coja, y por tanto no puedo poner un número determinado, no hay ninguna solución más?
  #8 (permalink)  
Antiguo 09/04/2010, 15:39
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
Por que no lo optimizas así:

Código HTML: 
Ver original
  1. <form name="menu">
  2. <input type="checkbox" name="opcion1" />
  3. <input type="checkbox" name="opcion2" />
  4. <input type="checkbox" name="opcion3" />
  5. <input type="checkbox" name="opcion4" />
  6. <input type="checkbox" name="opcion5" />
  7. </form>
  8. <p onclick="precio()">Precio</p>
  9. <input type="text" id="preciototalbox" value="0" />
  10.  
  11. <p onclick="preciofinal()">Precio final Alert</p>

Código Javascript: 
Ver original
  1. <script>
  2. var preciototal=0;
  3. var precios = {
  4. 1:4,
  5. 2:5.25,
  6. 3:7,
  7. 4:12.4,
  8. 5:15
  9. }
  10.  
  11. function precio(){
  12.  preciototal = 0;
  13.  for(var j in precios){
  14.   var obj = document.menu['opcion'+j]
  15.   preciototal+= obj.checked ? precios[j]: 0;
  16.  }
  17.  document.getElementById("preciototalbox").value = preciototal;
  18. }
  19.   
  20. function preciofinal(){
  21. alert("El precio total es de "+preciototal+" euros")
  22. }
  23.  
  24. </script>
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #9 (permalink)  
Antiguo 09/04/2010, 17:00
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Lo he puesto como tu dijiste pero a mi lo que me interesa es que cuando marque un checkbox el precio aumente en ese momento, no al final. por otra parte

<p onclick="precio()">Precio</p>

<input type="text" id="preciototalbox" value="0" />

<p onclick="preciofinal()">Precio final Alert</p>

donde se hace el onclick? es decir donde hay que hacer click?

y en cuanto al javascript tambien lo copie pero no lo entiendo muy bien en si, las lineas 13, 14 y 15 me confunden un poco, perdona por la ignorancia (:
  #10 (permalink)  
Antiguo 10/04/2010, 09:29
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
Esas lineas son un ciclo, y esta haciendo la misma condición que hacias del checked==true, en todos los casilleros, si esta seleccionado se suma el precio si no, se suma 0, el total de casilleros es el total de precios. Asi optimices un poco.

Ahora solo hace falta agregarle la función onclick a los casilleros:


Código javascript: 
Ver original
  1. <script>
  2. var preciototal=0;
  3. var precios = {
  4. 1:4,
  5. 2:5.25,
  6. 3:7,
  7. 4:12.4,
  8. 5:15
  9. }
  10.  
  11. function precio(){
  12.  preciototal = 0;
  13.  for(var j in precios){
  14.   var obj = document.menu['opcion'+j]
  15.   preciototal+= obj.checked ? precios[j]: 0;
  16.  }
  17.  document.getElementById("preciototalbox").value = preciototal;
  18. }
  19.   
  20. function preciofinal(){
  21. alert("El precio total es de "+preciototal+" euros")
  22. }
  23.  
  24. (function(){
  25.  for(var j in precios){
  26.   var obj = document.menu['opcion'+j];
  27.   obj.onclick=precio
  28.  }
  29. })()
  30.  
  31. </script>

El HTML:

Código HTML: 
Ver original
  1. <form name="menu">
  2. <input type="checkbox" name="opcion1" />
  3. <input type="checkbox" name="opcion2" />
  4. <input type="checkbox" name="opcion3" />
  5. <input type="checkbox" name="opcion4" />
  6. <input type="checkbox" name="opcion5" />
  7. </form>
  8.  
  9. <input type="text" id="preciototalbox" value="0" />
  10.  
  11. <p><button onclick="preciofinal()">Click para precio final</button></p>
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #11 (permalink)  
Antiguo 10/04/2010, 10:41
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Vale muchisisisisimas gracias! Ahora ya funciona! Gracias (:
  #12 (permalink)  
Antiguo 11/04/2010, 07:24
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Bueno ahora tengo otro problema y es que a la funcion preciofinal() le añadi unos cuantos argumentos mas pero entonces no me funciona la funcion precio(), el navegador me dice que document.menu no esta definido pero el formulario sigue llamandose menu. que esta mal? gracias


Código Javascript: 
Ver original
  1. <script>
  2.   
  3.       var preciototal=0;
  4.    
  5.       var precios = {
  6.    
  7.       1:4,
  8.    
  9.       2:5.25,
  10.    
  11.       3:7,
  12.   
  13.       4:12.4,
  14.   
  15.       5:15
  16.   
  17.       }
  18.   
  19.        
  20.  
  21.       function precio(){
  22.  
  23.        preciototal = 0;
  24.   
  25.        for(var j in precios){
  26.  
  27.         var obj = document.menu['opcion'+j]
  28.   
  29.         preciototal+= obj.checked ? precios[j]: 0;
  30.   
  31.        }
  32.  
  33.        document.getElementById("preciototalbox").value = preciototal;
  34.  
  35.       }
  36.  
  37.        
  38.  
  39.       function preciofinal(){
  40.  
  41.       if(document.menu.nmovil.value.length<9){
  42.        alert("Introduce tu número de teléfono móvil completo, por favor")
  43.        document.menu.nmovil.focus();
  44.       }
  45.  
  46.       if(document.menu.nfijo.value.length<9){
  47.        alert("Introduce tu número de teléfono fijo completo, por favor")
  48.        document.menu.nfijo.focus()      ;
  49.       }
  50.  
  51.       if(document.menu.getElementById("tarjeta").checked==false &&           
  52.  
  53.           document.menu.getElementById("efectivo").checked==false){
  54.        alert("Selecciona un método de pago, por favor");
  55.       }      
  56.   
  57.       alert("El precio total es de "+preciototal+" euros")
  58.   
  59.       }
  60.  
  61.       
  62.       (function(){
  63.  
  64.        for(var j in precios){
  65.  
  66.         var obj = document.menu['opcion'+j];
  67.  
  68.         obj.onclick=precio
  69.  
  70.       }
  71.      })()
  72.   
  73.        
  74.   
  75.       </script>
  #13 (permalink)  
Antiguo 11/04/2010, 19:35
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
No es necesario llamar el form para coger un objecto por su identificador: document.menu.getElementById("tarjeta")

por

document.getElementById("tarjeta")
o
document.menu.tarjeta si el checkbox tiene el atributo name=tarjeta claro :P
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #14 (permalink)  
Antiguo 12/04/2010, 12:03
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
vale ya entendi el problema pero sigue sin funcionar porque ahora el navegador me dice que falta una llave de cierre

"Error: missing } after function body
Línea: 84"

y esa linea coincide con la linea donde se cierra el script </script> he probado a poner la llave delante y detras del cierre del script pero en los dos casos me sigue diciendo que hay un error.

gracias por contestar (:
  #15 (permalink)  
Antiguo 12/04/2010, 13:18
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
Debe ser un error de la función preciofinal, talvez no hayas cerrado la llave de la función o habrás colocado algo mal, por que el resto de código esta bien y me funciona, coloca todo tu html y el script, así te digo cual es el error.
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #16 (permalink)  
Antiguo 12/04/2010, 14:16
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
vale tenias razon me falto por cerrar preciofinal() pero ahora sigue diciendome que document.menu esta indefinido en document.menu['opcion'+j]
Código Javascript: 
Ver original
  1. <script>
  2.   var preciototal=0;
  3.  
  4.   var precios = {
  5.  
  6.    1:4,
  7.  
  8.    2:5.25,
  9.  
  10.    3:7,
  11.         
  12.    4:12.4,
  13.          
  14.    5:15
  15.   
  16.   }
  17.  
  18.  function precio(){
  19.  
  20.   preciototal = 0;
  21.  
  22.   for(var j in precios){
  23.  
  24.   var obj = document.menu['opcion'+j]
  25.  
  26.   preciototal+= obj.checked ? precios[j]: 0;
  27.  
  28.              }
  29.  
  30.   document.getElementById("preciototalbox").value = preciototal;
  31.  
  32.  }
  33.  
  34.  function preciofinal(){
  35.   
  36.   if(document.menu.nmovil.value.length<9){
  37.   
  38.    alert("Introduce tu número de teléfono móvil completo, por favor")
  39.  
  40.    document.menu.nmovil.focus();
  41.  
  42.   }
  43.  
  44.   if(document.menu.nfijo.value.length<9){
  45.   
  46.   alert("Introduce tu número de teléfono fijo completo, por favor")
  47.   
  48.   document.menu.nfijo.focus()      ;
  49.   
  50.   }
  51.  
  52.   if(document.menu.getElementById("tarjeta").checked==false &&          
  53.  
  54.   document.menu.getElementById("efectivo").checked==false){
  55.  
  56.   alert("Selecciona un método de pago, por favor");
  57.  
  58.   alert("El precio total es de "+preciototal+" euros")
  59.   
  60.   }
  61.  }
  62.  
  63.  (function(){
  64.  
  65.   for(var j in precios){
  66.  
  67.   var obj = document.menu['opcion'+j];
  68.  
  69.   obj.onclick=precio
  70.   
  71.   }
  72.   
  73.  })()
  74.  
  75. </script>}

y luego el formulario:

Código PHP:
<form name="menu" onsubmit="preciofinal()" method=post action="">
<center><img src="http://i39.tinypic.com/qysc5y.jpg" id="Image2" alt="" align="top" border="0" width="200" height="130" 

style="position:absolute;left:300px;top:22px;width:200px;height:130px;z-index:1"></center>
<div id="wb_Text1" style="position:absolute;left:35px;top:189px;width:601px;height:290px;z-index:2" align="left">

Primero elige el o los platos:</font></div>
<input type="checkbox" id="Checkbox1" name="opcion1" value="" style="position:absolute;left:44px;top:505px;z-index:3" />
<input type="checkbox" id="Checkbox2" name="opcion2" value="" style="position:absolute;left:44px;top:537px;z-index:4" />
<input type="checkbox" id="Checkbox3" name="opcion3" value="" style="position:absolute;left:44px;top:569px;z-index:5" />
<input type="checkbox" id="Checkbox4" name="opcion4" value="" style="position:absolute;left:44px;top:601px;z-index:6" />
<input type="checkbox" id="Checkbox5" name="opcion5" value="" style="position:absolute;left:44px;top:633px;z-index:7" /> 
despues hay mas texto y finalmente
Código PHP:
<input type="checkbox" id="Checkbox7" name="Checkbox7" value="" style="position:absolute;left:44px;top:1029px;z-index:25">
<input type="text" id="Editbox2" style="position:absolute;left:135px;top:995px;width:100px;font-family:Courier 

New;font-size:16px;z-index:26" size="10" name="nmovil" value="">
<div id="wb_Text5" style="position:absolute;left:66px;top:990px;width:143px;height:35px;z-index:27" align="left">
<font style="font-size:29px" color="#000000" face="Freestyle Script">Móvil</font></div>
<div id="wb_Text6" style="position:absolute;left:66px;top:1022px;width:74px;height:35px;z-index:28" align="left">
<font style="font-size:29px" color="#000000" face="Freestyle Script">Fijo</font></div>
<div id="wb_Text7" style="position:absolute;left:35px;top:1076px;width:645px;height:116px;z-index:29" align="left">
<font style="font-size:48px" color="#000000" face="Freestyle Script">Por último, elige tu método de pago, con tarjeta de 

crédito o en efectivo:</font></div>
<input type="radio" id="tarjeta" name="pago" value="" style="position:absolute;left:44px;top:1207px;z-index:30">
<input type="radio" id="efectivo" name="pago" value="" style="position:absolute;left:42px;top:1239px;z-index:31">
<div id="wb_Text8" style="position:absolute;left:64px;top:1200px;width:101px;height:35px;z-index:32" align="left">
<font style="font-size:29px" color="#000000" face="Freestyle Script">Con tarjeta</font></div>
<div id="wb_Text9" style="position:absolute;left:64px;top:1232px;width:101px;height:35px;z-index:33" align="left">
<font style="font-size:29px" color="#000000" face="Freestyle Script">En efectivo</font></div>
<input type="button" id="Button1" name="Button1" value="Enviar pedido" 

style="position:absolute;left:343px;top:1452px;width:114px;height:25px;z-index:34">
<div id="wb_Text10" style="position:absolute;left:35px;top:1276px;width:764px;height:116px;z-index:35" align="center">
<font style="font-size:48px" color="#000000" face="Freestyle Script">Ahora haz click en el botón, y en <br>
unos minutos tendrás en tu casa el pedido</font></div>
<input type="text" id="Editbox3" style="position:absolute;left:117px;top:1027px;width:100px;font-family:Courier New;font-size:16px;z-index:36" size="8" name="nfijo" value="">
 <input type="text" id="preciototalbox" style="position:absolute;left:163px;top:693px;width:120px;font-family:Courier 

New;font-size:16px;z-index:13" size="12" name="Precio total" value="0" ReadOnly>
</form> 
muchas gracias :)
  #17 (permalink)  
Antiguo 12/04/2010, 15:10
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
El script ponlo al final del </form>, así reconoce el document.menu :P
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #18 (permalink)  
Antiguo 12/04/2010, 16:02
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Si cierro el script detrás del </form> lo lee todo como un script y no sale nada
  #19 (permalink)  
Antiguo 12/04/2010, 19:12
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
Abajo de </form> ...
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #20 (permalink)  
Antiguo 13/04/2010, 09:09
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Tu te refieres a poner

</form>
</script>

?? Eso es lo que entendi yo ;)
  #21 (permalink)  
Antiguo 13/04/2010, 09:19
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: Problema con concatenación
<form>
...
</form>

<script>
...
</script>

Es básico si pones el script dentro de form no lo reconocería.
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #22 (permalink)  
Antiguo 13/04/2010, 10:32
Avatar de _cronos  
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años
Puntos: 1
Respuesta: Problema con concatenación
Exactamente, ese era el problema, muchas gracias (:
Pero hay algo que todavia no me quedo claro porque yo los scripts casi siempre los he visto arriba, aqui se pone abajo porque hay un form?

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:21.