Foros del Web » Programando para Internet » Javascript »

Función dentro de otra función

 Estas en el tema de Función dentro de otra función en el foro de Javascript en Foros del Web. Muy buenas, que tal? Estoy practicando-aprendiendo javascript y me ha surgido un pequeño problema. Os explico. Tengo tres select el cual escojo procesador, monitor y ...
  #1 (permalink)  
Antiguo 30/10/2011, 11:37
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 18 años
Puntos: 15
Exclamación Función dentro de otra función
Muy buenas, que tal?

Estoy practicando-aprendiendo javascript y me ha surgido un pequeño problema. Os explico. Tengo tres select el cual escojo procesador, monitor y disco duro respectivamente. Lo que luego hago con esto es en su input text correspondiente mostrar el precio del elemento escogido, y para finalizar pulsando en un botón Calcular me muestra el precio de los elementos.

El problema que tengo es que he creado una función para obtener el nombre de cada select:

Código Javascript: 
Ver original
  1. function obtieneName(name){
  2.  
  3.             var nombreSelect = document.equipo.name;
  4.  
  5.             return nombreSelect;
  6.  
  7.         }

Para luego en cada función no tener que teclear todo el rato var indice = document.equipo.name.selectedIndex y dejarlo que lo genere dicha función, pero cuando le paso la función obtieneName(name) a otra no me saca el nombre de ese select específico si no del formulario entero. Os dejo el código para que lo vean mejor:

Código Javascript: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  
  3.     "http://www.w3.org/TR/html4/loose.dtd">
  4.  
  5. <html lang="es">
  6.  
  7. <head>
  8.  
  9. <!--
  10.  
  11.     2 - Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar:
  12.  
  13.     Procesador (Pentium III - $400, Pentium IV $500).
  14.  
  15.     Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550)
  16.  
  17.     Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500)
  18.  
  19.     Para cada característica indicamos string a mostrar (Ej. Pentium III) y el valor asociado a dicho string (Ej. 400).
  20.  
  21.     Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT.  
  22.  
  23. -->
  24.  
  25.     <title>Javascript</title>
  26.  
  27.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  28.  
  29.     
  30.  
  31.     <style type="text/css">
  32.  
  33.         div{
  34.  
  35.             margin:15px;
  36.  
  37.         }
  38.  
  39.         
  40.  
  41.         hr{
  42.  
  43.             margin:25px 0;
  44.  
  45.         }
  46.  
  47.     </style>
  48.  
  49.     
  50.  
  51.     <script type="text/javascript">
  52.  
  53.         
  54.  
  55.         function obtieneName(name){
  56.  
  57.             var nombreSelect = document.equipo.name;
  58.  
  59.             return nombreSelect;
  60.  
  61.         }
  62.  
  63.         
  64.  
  65.         function muestraPrecioProce(name){
  66.  
  67.             alert(obtieneName(name));
  68.  
  69.         }
  70.  
  71.         
  72.  
  73.         function muestraPrecioMonitor(){
  74.  
  75.         }
  76.  
  77.         
  78.  
  79.         function muestraPrecioDisco(){
  80.  
  81.         }
  82.  
  83.         
  84.  
  85.         function precioTotal(){
  86.  
  87.         }
  88.  
  89.     </script>
  90.  
  91.     
  92.  
  93. </head>
  94.  
  95. <body>
  96.  
  97.     <h1>Arma tu equipo</h1>
  98.  
  99.     <form name="equipo" method="post">
  100.  
  101.         <div>
  102.  
  103.             Procesadores
  104.  
  105.             <select name="procesador" onChange="muestraPrecioProce(this.name)">
  106.  
  107.                 <option value="0" selected="selected">Escoge un Procesador</option>
  108.  
  109.                 <option value="400">Pentium III</option>
  110.  
  111.                 <option value="500">Pentium IV</option>
  112.  
  113.             </select>
  114.  
  115.         </div>
  116.  
  117.         <div>
  118.  
  119.             Monitores
  120.  
  121.             <select name="monitor" onChange="">
  122.  
  123.                 <option value="0" selected="selected">Escoge un Monitor</option>
  124.  
  125.                 <option value="250">Samsung 14'</option>
  126.  
  127.                 <option value="350">Samsung 15'</option>
  128.  
  129.                 <option value="550">Samsung 17'</option>
  130.  
  131.             </select>
  132.  
  133.         </div>
  134.  
  135.         <div>
  136.  
  137.             Disco Duro
  138.  
  139.             <select name="Disco Duro" onChange="">
  140.  
  141.                 <option value="0" selected="selected">Escoge un Disco Duro</option>
  142.  
  143.                 <option value="300">80 Gb</option>
  144.  
  145.                 <option value="440">240 Gb</option>
  146.  
  147.                 <option value="500">440 Gb</option>
  148.  
  149.             </select>
  150.  
  151.         </div>
  152.  
  153.         <br>
  154.  
  155.         <input type="button" id="calularPrecio" value="Calcular">
  156.  
  157.     </form>
  158.  
  159.     <hr></hr>
  160.  
  161.     <p>Procesador escogido: <b><span id="procesadorSeleccionado">-procesador-</span></b>. Precio: <input type="text" name="precioProcesador" id="precioProce" readonly="readonly" size="10"> € </p>
  162.  
  163.     <p>Monitor escogido: <b><span id="monitorSeleccionado">-monitor-</span></b>. Precio: <input type="text" name="precioMonitor" id="precioMon" readonly="readonly" size="10"> € </p>
  164.  
  165.     <p>Disco Duro escogido: <b><span id="discoSeleccionado">-disco-</span></b>. Precio: <input type="text" name="precioDisco" id="precioDis" readonly="readonly" size="10"> € </p>
  166.  
  167.     <p><b>Importe Total</b> <input type="text" name="precioTotal" id="total" readonly="readonly" size="10"> € </p>
  168.  
  169.     
  170.  
  171. </body>
  172.  
  173. </html>

No está terminado la parte de JS pero desearía que me pudieran orientar al respecto de pasar parémtros por funciones y estas utilizarlas dentro de otra función, ¿me entienden?

Muchas gracias
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 30/10/2011, 13:48
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Función dentro de otra función
La palabra clave 'this' hace referencia al elemento que genera el evento, 'onchange' en este caso, entonces para acceder a las propiedades de este elemento ya no es necesario recorrer el arból de nodos con 'document.equipo'; por lo cual la funcion 'obtieneName()' queda bien de esta forma.

function obtieneName(elemento){

var nombreSelect = elemento.name;

return nombreSelect;

}

Y para llamarla solo se pasaria como parametro 'this' de esta manera.

<select name="procesador" onChange="muestraPrecioProce(this)">
  #3 (permalink)  
Antiguo 31/10/2011, 11:00
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 773
Antigüedad: 18 años
Puntos: 15
Respuesta: Función dentro de otra función
Cita:
Iniciado por lubtufano Ver Mensaje
La palabra clave 'this' hace referencia al elemento que genera el evento, 'onchange' en este caso, entonces para acceder a las propiedades de este elemento ya no es necesario recorrer el arból de nodos con 'document.equipo'; por lo cual la funcion 'obtieneName()' queda bien de esta forma.

function obtieneName(elemento){

var nombreSelect = elemento.name;

return nombreSelect;

}

Y para llamarla solo se pasaria como parametro 'this' de esta manera.

<select name="procesador" onChange="muestraPrecioProce(this)">
Muchísimas gracias, me has aclarado la duda que tenía al respecto :)

Un saludo !!!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?

Etiquetas: select
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 15:57.