Foros del Web » Programando para Internet » Javascript »

Sumar al precio final, otros productos desde SELECT

Estas en el tema de Sumar al precio final, otros productos desde SELECT en el foro de Javascript en Foros del Web. Hola a todos, y desde ya, gracias por entrar al post. Hoy les escribo para pedirles ayuda sobre un script que muestro a continuación: Código: ...
  #1 (permalink)  
Antiguo 01/09/2009, 15:18
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Sumar al precio final, otros productos desde SELECT

Hola a todos, y desde ya, gracias por entrar al post.

Hoy les escribo para pedirles ayuda sobre un script que muestro a continuación:
Código:
<html>
<head>
<script type="text/javascript">
var nOption = new Array()
var i=0;
var p=0;
for (i=0;i<=21;i++)
{
	nOption[i] = 5+p;
	p = p + 5;
}

function cambio(isList)
{
	txtIndex = isList.selectedIndex;
	document.getElementById('precio_final').innerHTML = nOption[txtIndex];
}
</script>
</head>
<body>
<!-- precio final -->
<p style="font-size:40px;">Predio final: $<span id="precio_final" style="color:#F30">5</span></p>

<!-- productos -->
<p>Producto 1</p>
<select name="precio1" onchange="cambio(this)">
  <? $p = 0; for($i=1;$i<=20;$i++){ ?>
  <option value="producto_<?=$i?>">Producto <?=$i?></option>
  <? $p = $p+5;} ?>
</select>

<!-- Quiero sumar este producto al precio final -->
<p>Otro producto: Quiero sumar este producto al precio final</p>
<select name="precio2">
  <? $p = 0; for($i=1;$i<=20;$i++){ ?>
  <option value="otro_producto_<?=$i?>">Otro Producto <?=$i?></option>
  <? $p = $p+5;} ?>
</select>

<!-- Y tambien sumar este otro producto al precio final -->
<p>X producto: Y tambien sumar este otro producto al precio final</p>
<select name="precio3">
  <? $p = 0; for($i=1;$i<=20;$i++){ ?>
  <option value="x_producto_<?=$i?>">X Producto <?=$i?></option>
  <? $p = $p+5;} ?>
</select>

</body>
</html>
Lo que hace el codigo es, segun el producto elejido, muestra el precio del mismo.
Pero quiero que: si se elijen otros productos tambien se sumen al precio final.

Espero haya sido lo suficientemente claro.
  #2 (permalink)  
Antiguo 01/09/2009, 16:46
 
Fecha de Ingreso: marzo-2005
Mensajes: 1.418
Antigüedad: 19 años
Puntos: 9
Respuesta: Sumar al precio final, otros productos desde SELECT

Si he entendido bien, algo así debería ser tu código:

Código javascript:
Ver original
  1. var sum = 0;
  2.  
  3. ....
  4.  
  5. function cambio(isList)
  6. {
  7.     txtIndex = isList.selectedIndex;
  8.            sum += nOption[txtIndex];
  9.     document.getElementById('precio_final').innerHTML =sum;
  10. }
  11.  
  12. ...
  13.  
  14. <select name="precio2" onchange="cambio(this)">
  15. .....
  16. <select name="precio3" onchange="cambio(this)">
  17. .....

Eliminé las líneas que quedan igual que en tu código. Solo escribí las que deberías agregar o modificar en el mismo. Fijate si con eso conseguís lo que estás buscando.

Saludos!.
__________________
Add, never Remove

Última edición por mariano_donati; 01/09/2009 a las 16:47 Razón: Cambiar código fuente
  #3 (permalink)  
Antiguo 01/09/2009, 17:01
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

funciona bien, pero solo para sumar.

teoricamente cada producto tiene un precio, y dependiendo de la seleccion del usuario, el precio debe subir, o bajar.

tu script hace que independientemente de la seleccion se sume infinitamente

en estas lineas:
Código javascript:
Ver original
  1. var nOption = new Array()
  2. var i=0;
  3. var p=0;
  4. for (i=0;i<=21;i++)
  5. {
  6.     nOption[i] = 5+p;
  7.     p = p + 5;
  8. }

se simplifica lo siguiente (los valores son distintos)

Código javascript:
Ver original
  1. nOption = new Array();
  2. nOption[0] = 75;
  3. nOption[1] = 80;
  4. nOption[2] = 85;
  5. nOption[3] = 90;
  6. nOption[4] = 95;
  7. nOption[5] = 100;
  8. nOption[6] = 105;
  9. nOption[7] = 110;
  10. nOption[8] = 115;
  11. nOption[9] = 120;
  12. nOption[10] = 125;
  13. nOption[11] = 130;
  14. nOption[12] = 135;
  15. nOption[13] = 140;
  16. nOption[14] = 145;
  17. nOption[15] = 150;
  18. nOption[16] = 155;
  19. nOption[17] = 160;
  20. nOption[18] = 165;
  21. nOption[19] = 170;
  22. nOption[20] = 175;
  #4 (permalink)  
Antiguo 01/09/2009, 17:28
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

en la funcion tienes que leer todos los select para poder hacer la suma correctamente. o sea, algo como
Código:
var sum = 0;
sum += nOption[select_uno.selectedIndex];
// el resto de los select
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 01/09/2009 a las 17:38
  #5 (permalink)  
Antiguo 01/09/2009, 18:04
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

zero, tu idea ya se me habia ocurrido, pero como no entiendo como armar el codigo.
si me podrias dar una mano te agradecería :D
  #6 (permalink)  
Antiguo 01/09/2009, 18:28
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

Código:
sum += nOption[select_uno.selectedIndex];
casi lo tienes todo. la linea anterior la repite tantas veces sea necesaria segun la cantidad de select. select_uno es un ejemplo de la referencia a un elemento select. simplemente tienes que cambiarlo por la referencia a tus selects. hay varias formas de tomar referencia del elemento, una de ella es con getElementById.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 01/09/2009, 18:57
 
Fecha de Ingreso: marzo-2005
Mensajes: 1.418
Antigüedad: 19 años
Puntos: 9
Respuesta: Sumar al precio final, otros productos desde SELECT

Lo que te dice zerokilled es que cada vez que se realice un cambio en algún select, tenés que restablecer a 0 la variable sum y sumar el valor seleccionado en cada select.
__________________
Add, never Remove
  #8 (permalink)  
Antiguo 01/09/2009, 19:27
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

te agradezco por tu tiempo y ayuda, pero no pude llegar a mi objetivo.
intente lo que me sugeriste pero sigue sumando indefinidamente.
  #9 (permalink)  
Antiguo 01/09/2009, 19:30
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

muestranos lo que tienes de momento. en base a eso te guiamos.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #10 (permalink)  
Antiguo 01/09/2009, 19:40
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

hasta el momento tengo lo siguiente.
intenté hacer lo que me has dicho. no estoy acostumbrado a JS.

Código html:
Ver original
  1. <script type="text/javascript">
  2. nOption = new Array();
  3.     nOption[0] = 75;
  4.     nOption[1] = 80;
  5.     nOption[2] = 85;
  6.     nOption[3] = 90;
  7.     nOption[4] = 95;
  8.     nOption[5] = 100;
  9.     nOption[6] = 105;
  10.     nOption[7] = 110;
  11.     nOption[8] = 115;
  12.     nOption[9] = 120;
  13.     nOption[10] = 125;
  14.     nOption[11] = 130;
  15.     nOption[12] = 135;
  16.     nOption[13] = 140;
  17.     nOption[14] = 145;
  18.     nOption[15] = 150;
  19.     nOption[16] = 155;
  20.     nOption[17] = 160;
  21.     nOption[18] = 165;
  22.     nOption[19] = 170;
  23.     nOption[20] = 175;
  24.  
  25. nOtroProducto = new Array();
  26.     nOtroProducto[0] = 5;
  27.     nOtroProducto[1] = 10;
  28.     nOtroProducto[2] = 15;
  29.     nOtroProducto[3] = 20;
  30.     nOtroProducto[4] = 25;
  31.     nOtroProducto[5] = 30;
  32.     nOtroProducto[6] = 35;
  33.     nOtroProducto[7] = 40;
  34.     nOtroProducto[8] = 45;
  35.     nOtroProducto[9] = 50;
  36.     nOtroProducto[10] = 55;
  37.     nOtroProducto[11] = 60;
  38.     nOtroProducto[12] = 65;
  39.     nOtroProducto[13] = 70;
  40.     nOtroProducto[14] = 75;
  41.     nOtroProducto[15] = 80;
  42.     nOtroProducto[16] = 85;
  43.     nOtroProducto[17] = 90;
  44.     nOtroProducto[18] = 95;
  45.     nOtroProducto[19] = 100;
  46.     nOtroProducto[20] = 105;
  47.    
  48.  
  49.  
  50. function cambio(isList)
  51. {
  52.     txtIndex = isList.selectedIndex;
  53.    
  54.     sum = nOption[txtIndex];
  55.     sum += nOtroProducto[txtIndex];
  56.    
  57.     document.getElementById('precio_final').innerHTML = sum;
  58. }
  59. </head>
  60. <!-- precio final -->
  61. <p style="font-size:40px;">Predio final: $<span id="precio_final" style="color:#F30">75</span></p>
  62.  
  63. <!-- productos -->
  64. <p>Producto 1</p>
  65. <select name="precio1" onchange="cambio(this)">
  66.     <option value="producto_1">Producto 1</option>
  67.     <option value="producto_2">Producto 2</option>
  68.     <option value="producto_3">Producto 3</option>
  69.     <option value="producto_4">Producto 4</option>
  70.     <option value="producto_5">Producto 5</option>
  71.     <option value="producto_6">Producto 6</option>
  72.     <option value="producto_7">Producto 7</option>
  73.     <option value="producto_8">Producto 8</option>
  74.     <option value="producto_9">Producto 9</option>
  75.     <option value="producto_10">Producto 10</option>
  76.     <option value="producto_11">Producto 11</option>
  77.     <option value="producto_12">Producto 12</option>
  78.     <option value="producto_13">Producto 13</option>
  79.     <option value="producto_14">Producto 14</option>
  80.     <option value="producto_15">Producto 15</option>
  81.     <option value="producto_16">Producto 16</option>
  82.     <option value="producto_17">Producto 17</option>
  83.     <option value="producto_18">Producto 18</option>
  84.     <option value="producto_19">Producto 19</option>
  85.     <option value="producto_20">Producto 20</option>
  86.   </select>
  87.  
  88. <!-- Quiero sumar este producto al precio final -->
  89. <p>Otro producto: Quiero sumar este producto al precio final</p>
  90. <select name="precio2" onchange="cambio(this)">
  91.     <option value="otro_producto_1">Otro Producto 1</option>
  92.     <option value="otro_producto_2">Otro Producto 2</option>
  93.     <option value="otro_producto_3">Otro Producto 3</option>
  94.     <option value="otro_producto_4">Otro Producto 4</option>
  95.     <option value="otro_producto_5">Otro Producto 5</option>
  96.     <option value="otro_producto_6">Otro Producto 6</option>
  97.     <option value="otro_producto_7">Otro Producto 7</option>
  98.     <option value="otro_producto_8">Otro Producto 8</option>
  99.     <option value="otro_producto_9">Otro Producto 9</option>
  100.     <option value="otro_producto_10">Otro Producto 10</option>
  101.     <option value="otro_producto_11">Otro Producto 11</option>
  102.     <option value="otro_producto_12">Otro Producto 12</option>
  103.     <option value="otro_producto_13">Otro Producto 13</option>
  104.     <option value="otro_producto_14">Otro Producto 14</option>
  105.     <option value="otro_producto_15">Otro Producto 15</option>
  106.     <option value="otro_producto_16">Otro Producto 16</option>
  107.     <option value="otro_producto_17">Otro Producto 17</option>
  108.     <option value="otro_producto_18">Otro Producto 18</option>
  109.     <option value="otro_producto_19">Otro Producto 19</option>
  110.     <option value="otro_producto_20">Otro Producto 20</option>
  111.   </select>
  112.  
  113. </body>
  114. </html>
  #11 (permalink)  
Antiguo 01/09/2009, 21:20
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

podria mostrarte la solucion pero me estoy limitando a eso. a mi juicio, no tendria sentido mostrar la solucion si al final no aprendes nada, independientemente si se trata de un ocio, ejercicio de colegio, o urgencia de proyecto. vamos a tomar otro rumbo. a continuacion te muestro un pseudocodigo de como sera el codigo. si otro miembro quiere darte la solucion, no me voy a molestar pues cada cual tiene su forma de compartir y educar.

Código:
funcion cambiar
variable total = 0
variable select = tomar_coleccion("select")
	para (variable i = 0, i menor que longitud select, incrementar i)
	total += nOption[ selectedIndex de select[i]]
	fin para
document.getElementById('precio_final').innerHTML = total
fin cambiar 
bold - son propiedades, funciones, variables u objetos
italic - conforma a la sintaxis del lenguaje
a continuacion una lista de las funciones, propiedades y sintaxis que necesitaras para el codigo final: function, var, for, incrementar, menor que, getElementById, getElementsByTagName, length, selectedIndex
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 01/09/2009 a las 21:26
  #12 (permalink)  
Antiguo 01/09/2009, 21:44
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

estoy profundamente agradecido por tu buena voluntad. la verdad es que me ecanta tu forma de enseñar. no conozco mucho de JS, me dedico mas a PHP.

en cuanto al codigo deduje lo siguiente
Código javascript:
Ver original
  1. function cambio()
  2. {
  3.     var total = 0;
  4.    
  5.     _select = document.getElementsByTagName('select');
  6.    
  7.     for(i=0; i < _select ; i++)
  8.     {
  9.         total += nOption[_select[i].selectedIndex];
  10.     }
  11.     document.getElementById('precio_final').innerHTML = total;
  12. }

lo implementé, pero parece que me hacen falta mas clases jaja, pues al cambiar el item de la lista devuelve cero.

me gustaria saber si podrias explicarme como es que (en este caso) JS procesa el flujo de datos? y como es que DOM interactua con el HTML?

vuelvo a darte las gracias.
  #13 (permalink)  
Antiguo 01/09/2009, 22:23
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

te felicito por el esfuerzo, haz hecho la mayor parte del codigo. sin embargo, mi gran disculpa. parece que no le mostre la suficiente atencion a tu ultimo post. esta vez tienes dos arrays de valores diferentes. si fuera un solo array de valores, como en tus post anteriores, el codigo anterior seria el correcto. para corregirlo, elimina el for completo por lo siguiente:
Código:
// nuevamente pseudocodigo;
	total += nOption[ selectedIndex de select[0] ]
	total += nOtroProducto[ selectedIndex de select[1] ]
respecto a tus duda, quizas quieras leer el tutorial HTML DOM de w3schools. basicamente el DOM es una estructura que define metodos y propiedades que permite interactuar con un documento HTML. o sea, el DOM es una API integrada en javascript con el proposito de manipular el documento desde el cliente. te recomiendo que leas el tutorial, si algo no te queda claro, no dudes en pasar por aca.

Cita:
como es que (en este caso) JS procesa el flujo de datos?
no estoy seguro si comprendi la pregunta. ¿podrias ser un poquito mas concreto?
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #14 (permalink)  
Antiguo 02/09/2009, 10:36
Avatar de dannce4life  
Fecha de Ingreso: junio-2008
Ubicación: localhost
Mensajes: 137
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Sumar al precio final, otros productos desde SELECT

Funcionó perfectamente.

En cuanto a mi pregunta, coloquialmente, se resume en "como funciona el script".

Miré detenidamente el codigo y pude comprender el proceso. Correjime si me equivoco.

Código:
- Se crea una funcion para imponer el proceso en las etiquetas HTML correspondientes.

- Se inicializa una variable "total" con valor predeterminado en 0 para que siempre retorne al origen si no se producen cambios.

- Se abre otra variable "select" que almacene dichos campos para despues ser leidos y asociados a su matriz correspondiente.

- Total, almacena y suma:
   1) el valor de la matriz asociada en el primer select
   2) el valor de la segunda matriz asociada

- Se reastrea el identificador 'precio' y se cambia el valor por defecto, por el nuevo 'total'.
Miles de gracias, y tu acto de docencia hizo que comprendiera un poco mas este nuevo lenguaje para mi. Obviamente despertó aún mas mi interés.
  #15 (permalink)  
Antiguo 02/09/2009, 10:58
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años
Puntos: 1485
Respuesta: Sumar al precio final, otros productos desde SELECT

para no saber mucho de javascript, esta perfectamente bien interpretado. ¡exito!
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
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




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