1

Estoy realizando un curso de javascript y me han pedido realizar un conversor de unidades de temperatura de Celcius a Fahrenheit y a Kelvin pero solo usando botones, campos y condicionales if-else.

He intentado hacerlo pero me he estancado.

Llevo hecho esto:

  var = C = 0;
  var = K = 0;
  var = F = 0;
 
      //Fahrenheit a Celsius   C =(F-32)*5/9
      function Fahrenheit_Celsius() {
        
        F = document.getElementById("cantidad").value

        C =(F-32)*5/9;
       
       Mensaje = ("Celsius: " + C);
        
      }
       
     //Fahrenheit a Kelvin K = (F-32)*5/9 +273
      function Fahrenheit_Kelvin() {

        F = document.getElementById("cantidad").value

        K = (F-32)*5/9 +273;

        Mensaje = ("Kelvin: " + K);
        
      }
      
      //Celsius a Fahrenheit  F = C*9/5+32
      function Celsius_Fahrenheit() {

        C = document.getElementById("cantidad").value

        F =C*9/5+32;

        Mensaje = ("Fahrenheit " + F);
        
      }
     
     //Celsius a Kelvin K=C+273
     function Celsius_Kelvin() {

       C = document.getElementById("cantidad").value;

       K=C+273;

       Mensaje = ("Celsius: " + K);

      }
      
                   
      //Kelvin a Fahrenheit   F= (k-273)9/5+32
      function Kelvin_Fahrenheit() {

         K = document.getElementById("cantidad").value;

         F= (K-273)*9/5+32;

         Mensaje = ("Fahrenheit: " + F );
        
      }

       //Kelvin a Celsius C=K-273
      function Kelvin_Celsius() {

      K = document.getElementById("cantidad").value;

      C=K-273;

      Mensaje = ("Celsius: " + C );
        
      }
       
       }

  } else {

    Mensaje = "Error"
  } 
  
}
  
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Conversor de Temperatura</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

  <strong>Conversor de Temperatura</strong><br>

  <br>Ingrese valor a convertir<br>
  <input type="number"  id ="cantidad" name="numero">
  <div id="Mensaje"></div><br>

  Seleccione la conversion que quiere hacer:<br><br>

<button onclick="Fahrenheit_Celsius()">Fahrenheit a Celsius</button>
<button onclick="Fahrenheit_Kelvin()">Fahrenheit a Kelvin</button><br><br>
<button onclick="Celsius_Fahrenheit()">Celsius a Fahrenheit</button>
<button onclick="Celsius_Kelvin()">Celsius a Kelvin</button><br><br>
<button onclick="Kelvin_Fahrenheit()">Kelvin a Fahrenheit</button>
<button onclick="Kelvin_Celsius()">Kelvin a Celsius</button><br>


</body>
</html>

La pregunta es ¿Cómo puedo hacer para incluir las condicionales? Porque estoy obligado a utilizarlas

2
  • 1
    Tienes un error tipográfico, no puedes declarar var con un = por delante del nombre de la variable.
    – GDP
    Commented el 3 ago. 2017 a las 8:17
  • Lo primero, se ordenado con tu código, formatealo y ponlo bonito intenta seguir la guía.` Lo segundo, tienes un error en como defines las variables en javascript, mirate este documento Commented el 3 ago. 2017 a las 8:48

1 respuesta 1

0

Buenas, he modificado y corregido tus errores tipográficos. El resultado seria tal que así: El script como he visto que estás importando el jQuery también te lo he puesto en el ejemplo:

EDICIÓN: Añadí las cláusulas if-elseif que no había implementado

JAVASCRIP

var C = 0;
var K = 0;
var F = 0;

      function convertir(e) {

      //Fahrenheit a Celsius   C =(F-32)*5/9
        if (e.target.name == "Fahrenheit-a-Celsius") {
       // CON JQUERY
        F = $('#cantidad').val();
       // CON JAVASCRIPT PURO
        F = document.getElementById("cantidad").value;

        C = (F-32)*5/9;

        // CON JQUERY
       $('#mensaje').text("Celsius: " + C); 
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = "Celsius: " + C;

        }

        //Fahrenheit a Kelvin K = (F-32)*5/9 +273
        else if (e.target.name == "Fahrenheit-a-Kelvin"){
            // CON JQUERY
        K = $('#cantidad').val();
       // CON JAVASCRIPT PURO
         K = document.getElementById("cantidad").value;

        K = (F-32)*5/9 +273;

        // CON JQUERY
       $('#mensaje').text("Kelvin: " + K);
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = ("Kelvin: " + K);

        }
            //Celsius a Fahrenheit  F = C*9/5+32
            else if (e.target.name == "Celsius-a-Fahrenheit"){
       // CON JQUERY
        C = $('#cantidad').val();
       // CON JAVASCRIPT PURO
         C = document.getElementById("cantidad").value;

        F =C*9/5+32;

        // CON JQUERY
       $('#mensaje').text("Kelvin: " + F);
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = ("Fahrenheit: " + F);

        }

        //Celsius a Kelvin K=C+273
            else if (e.target.name == "Celsius-a-Kelvin"){
       // CON JQUERY
        C = $('#cantidad').val();
       // CON JAVASCRIPT PURO
         C = document.getElementById("cantidad").value;

       K=C+273;

        // CON JQUERY
       $('#mensaje').text("Celsius: " + K);
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = ("Celsius: " + K);  

        }

        //Kelvin a Fahrenheit   F= (k-273)9/5+32
            else if (e.target.name == "Kelvin-a-Fahrenheit"){

        // CON JQUERY
        K = $('#cantidad').val();
       // CON JAVASCRIPT PURO
         K = document.getElementById("cantidad").value;

         F= (K-273)*9/5+32;

        // CON JQUERY
       $('#mensaje').text("Fahrenheit: " + F );
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = ("Fahrenheit: " + F );

        }

         //Kelvin a Celsius C=K-273
        else{
        // CON JQUERY
        K = $('#cantidad').val();
       // CON JAVASCRIPT PURO
         K = document.getElementById("cantidad").value;

        C=K-273;

        // CON JQUERY
       $('#mensaje').text("Celsius: " + C );
       // CON JAVASCRIPT PURO
       document.getElementById("mensaje").innerHTML = ("Celsius: " + C );
        }
      }

NOTA: Tendrás que elegir entre javascript puro o jQuery.

En tu HTML no he tocado casi nada, solo los nombres de las funciones que las he pasado a minúsculas.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Conversor de Temperatura</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>

      <strong>Conversor de Temperatura</strong><br>

      <br>Ingrese valor a convertir<br>
      <input type="number" id ="cantidad" name="numero">
      <div id="mensaje"></div><br>

      Seleccione la conversion que quiere hacer:<br><br>

<button onclick="convertir(event)" name="Fahrenheit-a-Celsius">Fahrenheit a Celsius</button>
<button onclick="convertir(event)" name="Fahrenheit-a-Kelvin">Fahrenheit a Kelvin</button><br><br>
<button onclick="convertir(event)" name="Celsius-a-Fahrenheit">Celsius a Fahrenheit</button>
<button onclick="convertir(event)" name="Celsius-a-Kelvin">Celsius a Kelvin</button><br><br>
<button onclick="convertir(event)" name="Kelvin-a-Fahrenheit">Kelvin a Fahrenheit</button>
<button onclick="convertir(event)" name="Kelvin-a-Celsius">Kelvin a Celsius</button><br>
    </body>
    </html>

La función quedaría como una solo función y se diferenciaría la cada función en la condición if-elseif por el nombre del botón en este ejemplo. Prueba de esta forma y nos cuentas.

2
  • una pregunta ¿para que sirve target?
    – condor12
    Commented el 10 ago. 2017 a las 19:07
  • Hola @condor12, el target es el elemento que ha ejecutado ese evento. En este caso es cada el botón que se ha pulsado. event.target.name Selecciona de la función (convertir()) el nombre del elemento que ha disparado el evento, en este caso un <button>.
    – Edu3D
    Commented el 11 ago. 2017 a las 7:03

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.