Llamar a los valores introducidos por el usuario de una función (X) a otra función (Y) y mostrar el resultado

Question

lo primero dar las gracias al foro por todas las dudas que he aclarado.

Estoy haciendo un programa sencillo para calcular la eficiencia de un coche e circuito. Mi duda está en que al pedirle los datos al usuario en la función "introducir_valores" , luego no soy capaz de que la otra función "rela_peso_potencia" trabaje con los datos que el usuario ha introducido.

¿Qué estoy haciendo mal?

<html>

 <head>
  
 </head>


 <script>

  // Declaramos la variable "calcular_eficiencia" como variable global
     var calcular_eficiencia;

     function introducir_valores(peso,potencia,par,cilindrada){

     // Solicitamos al usuario los valores de peso y potencia
         var peso = document.getElementById('peso').value;
         var potencia = document.getElementById('potencia').value;

     }

     //Declaramos la función que desarrolla la relación peso-potencia
     function rela_peso_potencia(resultado) {
         
         //Llamamos a la función en la que guardamos los valores anteriormente
         introducir_valores();

         // Verificamos que tanto peso como potencia contengan valores
         if(peso == "" || potencia == "") {
             alert('Hay campos sin rellenar');
             return;
         }
         
         //Declaramos el resultado que va a tener la función y lo mostramos en el div llamado "content"
         resultado = peso/potencia;
         document.getElementById("content").innerHTML = resultado;
     }


     //Creamos esta función para que al darle al botón de "enviar" se muestre el resultado de todas las funciones
     function mostrar_funciones(){

      rela_peso_potencia();
     }

 </script>
 <body>
   <br>

   <input type="text" placeholder="Escriba el peso" id="peso" pattern="^-?\d+\.?\d+$"> &nbsp;

   <input type="text" placeholder="Escriba la potencia" id="potencia" pattern="^-?\d+\.?\d+$"> &nbsp;

   <button onclick="mostrar_funciones();" id="btn_mostrar"> Enviar </button>
   
   <br>

   <br>

   <div id="content"></div>

   </body>

</html>

Por regla general, las variables declaradas dentro de una función solamente pueden ser usadas desde dentro de esa función. Para los casos en los que necesites acceder a ellas desde fuera de ese **ámbito** puedes optar por declararlas en un **ámbito superior**. En tu caso, si las declaras donde estás declarando la variable **calcular_eficiencia** conseguirás que sea accesible por cualquiera de las tres funciones que tienes. — phpMyGuel, Apr 05 '19 at 11:21
Lo que podrías hacer también es que la función **introducir_valores** hiciera un **return** con un **array** que contenga las dos variables. Luego en la función **rela_peso_potencia** recuperarías ese valor al llamar a la función introducir_valores y ya podrías usarlos. Esta manera para mí es más apropiada que la que te comenté arriba. — phpMyGuel, Apr 05 '19 at 11:31

score 1 · Accepted Answer · answered Apr 05 '19 at 11:33

Como te han comentado, las variables peso y potencia no son accesibles en la función rela_peso_potencia porque pertenecen al ámbito de la función introducir_valores. De todas formas creo que estás complicando en exceso el código.

Piensa que lo único que quieres es una función a la que le pasas dos variables (tus inputs peso y potencia), hace un cálculo y te pinta el resultado (o devolverlo, si quisieras), por eso, con la función rela_peso_potencia pasándole el peso y la potencia ya lo tendrías:

  
     //Declaramos la función que desarrolla la relación peso-potencia
     function rela_peso_potencia(peso, potencia) {         
         // Verificamos que tanto peso como potencia contengan valores
         if(peso == "" || potencia == "") {
             alert('Hay campos sin rellenar');
             return;
         }         
         //Declaramos el resultado que va a tener la función y lo mostramos en el div llamado "content"
         let resultado = peso/potencia;
         document.getElementById("content").innerHTML = resultado;
     }

<html>

 <head>  
 </head>
 <body>
   <br>

   <input type="text" placeholder="Escriba el peso" id="peso" pattern="^-?\d+\.?\d+$"> &nbsp;

   <input type="text" placeholder="Escriba la potencia" id="potencia" pattern="^-?\d+\.?\d+$"> &nbsp;

   <button onclick="rela_peso_potencia(document.getElementById('peso').value,document.getElementById('potencia').value);" id="btn_mostrar"> Enviar </button>   
   <br>
   <br>

   <div id="content"></div>

   </body>

</html>

Te recomiendo echar un vistazo a esta pregunta sobre var, let y const

Muchas gracias, muy interesante lo de var,let,const o nada. Es buena idea lo de simplificar al código pero el programa se va a ir complicando un poco más, con más variables introducidas por el usuario. — alvgarbay, Apr 05 '19 at 17:01
Es lógico que la lógica se complique, por eso mismo tiene que intentar hacer tu código lo más sencillo posible. — Kiko_L, Apr 06 '19 at 12:25

score 0 · Answer 2 · answered Apr 05 '19 at 11:34

<html>

 <head>
  
 </head>


 <script>

  // Declaramos la variable "calcular_eficiencia" como variable global
     var calcular_eficiencia;

     function introducir_valores(peso,potencia,par,cilindrada){

     // Solicitamos al usuario los valores de peso y potencia
          var respuesta = []
      
         respuesta['peso'] = document.getElementById('peso').value;
         respuesta['potencia'] = document.getElementById('potencia').value;
          
          return respuesta;

     }

     //Declaramos la función que desarrolla la relación peso-potencia
     function rela_peso_potencia(resultado) {
         
         //Llamamos a la función en la que guardamos los valores anteriormente
         var valores = introducir_valores();
          var peso = valores['peso'];
          var potencia = valores['potencia'];

         // Verificamos que tanto peso como potencia contengan valores
         if(peso == "" || potencia == "") {
             alert('Hay campos sin rellenar');
             return;
         }
         
         //Declaramos el resultado que va a tener la función y lo mostramos en el div llamado "content"
         resultado = peso/potencia;
         document.getElementById("content").innerHTML = resultado;
     }


     //Creamos esta función para que al darle al botón de "enviar" se muestre el resultado de todas las funciones
     function mostrar_funciones(){

      rela_peso_potencia();
     }

 </script>
 <body>
   <br>

   <input type="text" placeholder="Escriba el peso" id="peso" pattern="^-?\d+\.?\d+$"> &nbsp;

   <input type="text" placeholder="Escriba la potencia" id="potencia" pattern="^-?\d+\.?\d+$"> &nbsp;

   <button onclick="mostrar_funciones();" id="btn_mostrar"> Enviar </button>
   
   <br>

   <br>

   <div id="content"></div>

   </body>

</html>

Esta solución se basa en la segunda solución que te propuse.

score 0 · Answer 3 · answered Apr 05 '19 at 16:59

Muchas gracias, finalmente esto es lo que quería, muy bien explicado, adjunto el texto de tu primera respuesta tambén:

Por regla general, las variables declaradas dentro de una función solamente pueden ser usadas desde dentro de esa función. Para los casos en los que necesites acceder a ellas desde fuera de ese ámbito puedes optar por declararlas en un ámbito superior. En tu caso, si las declaras donde estás declarando la variable calcular_eficiencia conseguirás que sea accesible por cualquiera de las tres funciones que tienes.

<html>

 <head>
  
 </head>


 <script>

  // Declaramos la variable "calcular_eficiencia" como variable global
     var calcular_eficiencia;

     function introducir_valores(peso,potencia,par,cilindrada){

     // Solicitamos al usuario los valores de peso y potencia
         var peso = document.getElementById('peso').value;
         var potencia = document.getElementById('potencia').value;

     }

     //Declaramos la función que desarrolla la relación peso-potencia
     function rela_peso_potencia(resultado) {
         
         //Llamamos a la función en la que guardamos los valores anteriormente
         introducir_valores();

         // Verificamos que tanto peso como potencia contengan valores
         if(peso == "" || potencia == "") {
             alert('Hay campos sin rellenar');
             return;
         }
         
         //Declaramos el resultado que va a tener la función y lo mostramos en el div llamado "content"
         resultado = peso/potencia;
         document.getElementById("content").innerHTML = resultado;
     }


     //Creamos esta función para que al darle al botón de "enviar" se muestre el resultado de todas las funciones
     function mostrar_funciones(){

      rela_peso_potencia();
     }

 </script>
 <body>
   <br>

   <input type="text" placeholder="Escriba el peso" id="peso" pattern="^-?\d+\.?\d+$"> &nbsp;

   <input type="text" placeholder="Escriba la potencia" id="potencia" pattern="^-?\d+\.?\d+$"> &nbsp;

   <button onclick="mostrar_funciones();" id="btn_mostrar"> Enviar </button>
   
   <br>

   <br>

   <div id="content"></div>

   </body>

</html>

<html>

 <head>
  
 </head>


 <script>

  // Declaramos la variable "calcular_eficiencia" como variable global
     var calcular_eficiencia;

     function introducir_valores(peso,potencia,par,cilindrada){

     // Solicitamos al usuario los valores de peso y potencia
          var respuesta = []
      
         respuesta['peso'] = document.getElementById('peso').value;
         respuesta['potencia'] = document.getElementById('potencia').value;
          
          return respuesta;

     }

     //Declaramos la función que desarrolla la relación peso-potencia
     function rela_peso_potencia(resultado) {
         
         //Llamamos a la función en la que guardamos los valores anteriormente
         var valores = introducir_valores();
          var peso = valores['peso'];
          var potencia = valores['potencia'];

         // Verificamos que tanto peso como potencia contengan valores
         if(peso == "" || potencia == "") {
             alert('Hay campos sin rellenar');
             return;
         }
         
         //Declaramos el resultado que va a tener la función y lo mostramos en el div llamado "content"
         resultado = peso/potencia;
         document.getElementById("content").innerHTML = resultado;
     }


     //Creamos esta función para que al darle al botón de "enviar" se muestre el resultado de todas las funciones
     function mostrar_funciones(){

      rela_peso_potencia();
     }

 </script>
 <body>
   <br>

   <input type="text" placeholder="Escriba el peso" id="peso" pattern="^-?\d+\.?\d+$"> &nbsp;

   <input type="text" placeholder="Escriba la potencia" id="potencia" pattern="^-?\d+\.?\d+$"> &nbsp;

   <button onclick="mostrar_funciones();" id="btn_mostrar"> Enviar </button>
   
   <br>

   <br>

   <div id="content"></div>

   </body>

</html>

Llamar a los valores introducidos por el usuario de una función (X) a otra función (Y) y mostrar el resultado

3 Answers3