0

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>

2
  • 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
    Commented el 5 abr. 2019 a las 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
    Commented el 5 abr. 2019 a las 11:31

3 respuestas 3

1

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

2
  • 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
    Commented el 5 abr. 2019 a las 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
    Commented el 6 abr. 2019 a las 12:25
0

<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.

0

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.

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.