My JavaScript in not working in my temperature converter

Question

I am writing a temperature converter and can't seem to figure out what is wrong with my javascript. I can't even get it to alert "running". My function used to be called convert, but I thought maybe that was a key word of js, so I changed it to tempConvert. The code is supposed to convert temperatures between one another.

Two tests I use are

32F = 0C

and

72F = 22.22222...C

It work fine in prompt and alert messages, now I want to use input boxes.

<!DOCTYPE html />

<html>
<head>
    <script type="text/javascript">         
        function tempConvert(){
            alert("running.");
            var f = document.getElementById("fahrenheit").value; //Gets the value for farenheit.
            var c = document.getElementById("celsius").value; //Gets the value for celsius
            var tf = isNumber(f); //Test if the value of f is a number.
            var tc = isNumber(c); //Test if the value of c is a number.

            if (tf = true){
//if f is a number run this
                c = (f-32)/1.8; //conversion from f to c
                document.getElementById("celsius").value = c; //sets the value of the celsius input box to c.
                alert(c);
            } else if (tc = true){
// does the same as previous if statement, switching temperature types.
                f = (c+32)*1.8;
                document.getElementById("fahrenheit").value = f;
            } else {
                alert("One of your inputs are invalid.");
// alerts the user if f and c are not a number.
            }
        }

        funcion isNumber(test){ //A custom function(method) used to test if f or c is a number
            return !isNaN(parseFloat(test)) && isFinite(test); //copied from another article in stackoverflow (http://stackoverflow.com/questions/6449611/how-to-check-whether-a-value-is-a-number-in-javascript-or-jquery)
        }
    </script>
</head>
<body>
    <input id="fahrenheit" placeholder="fahrenheit"></input> = 
    <input id="celsius" placeholder="celsius"></input>
    <input type="button" value="convert" onclick="tempConvert()" />
</body>
</html>

Are you getting any Error? Or function is not even calling.. — Thangadurai, Jan 13 '16 at 05:22
Function spelling mistake in follwoing line: funcion isNumber(test); — Abhinab Kanrar, Jan 13 '16 at 05:24

score 1 · Accepted Answer · answered Jan 13 '16 at 05:22

Working Fiddle

You have quite a few syntax errors in your code (be sure to listen to your console and see why your program isn't running).

funcion isNumber(test){
^^^^^^^
    ....
}

You misspelled function here.

Also don't forget that = and == are very different! In your code, you're accidentally setting tf and tc instead of comparing them in your if statements.

For example, here:

if (tf = true){
       ^
    ...
}

Should be:

if (tf == true){
       ^^
    ...
}

@JosephLyle Glad I could help! – Nick Zuber Jan 13 '16 at 05:28 — Nick Zuber, Jan 13 '16 at 05:28

score 0 · Answer 2 · answered Jan 13 '16 at 05:21

You misspelled function in your isNumber function. If you change funcion to function I'm pretty sure this will all work. For future reference, you might want to take a look at your javascript console in a browser to diagnose this kind of thing. Control+shift+J in Chrome.

score 0 · Answer 3 · answered Jan 13 '16 at 05:25

function spelling mistakes funcion isNumber(test); to function isNumber(test); here is the code

<html>
<head>
    <script>         
        function tempConvert(){
            alert("running.");
            var f = document.getElementById("fahrenheit").value; //Gets the value for farenheit.
            var c = document.getElementById("celsius").value; //Gets the value for celsius
            var tf = isNumber(f); //Test if the value of f is a number.
            var tc = isNumber(c); //Test if the value of c is a number.

            if (tf = true){
//if f is a number run this
                c = (f-32)/1.8; //conversion from f to c
                document.getElementById("celsius").value = c; //sets the value of the celsius input box to c.
                alert(c);
            } else if (tc = true){
// does the same as previous if statement, switching temperature types.
                f = (c+32)*1.8;
                document.getElementById("fahrenheit").value = f;
            } else {
                alert("One of your inputs are invalid.");
// alerts the user if f and c are not a number.
            }
        }

        function isNumber(test){ //A custom function(method) used to test if f or c is a number
            return !isNaN(parseFloat(test)) && isFinite(test); //copied from another article in stackoverflow (http://stackoverflow.com/questions/6449611/how-to-check-whether-a-value-is-a-number-in-javascript-or-jquery)
        }
    </script>
</head>
<body>
    <input id="fahrenheit" placeholder="fahrenheit"></input> = 
    <input id="celsius" placeholder="celsius"></input>
    <input type="button" value="convert" onclick="tempConvert()" />
</body>
</html>

score 0 · Answer 4 · answered Jan 13 '16 at 07:12

Though a question is already answered just thought it can be made a bit interactive by just tweaking a little and removing the button .Here is what I did

HTML

<input id="fahrenheit"  placeholder="fahrenheit" onkeyup="tempConverter(event)"> = 
<input id="celsius"  placeholder="celsius" onkeyup="tempConverter(event)">

JS

function tempConverter(event){
// using event object to get the parameters
var getTarget = event.target.id;
var getTargetValue = event.target.value;

  //When no input value is present  
    if(getTargetValue ==""){
      document.getElementById("celsius").value = "";
      document.getElementById("fahrenheit").value = "";
    }

   // populate the relevant input box 
    if(isNumber(getTargetValue)){

       if(getTarget ==="fahrenheit"){
           document.getElementById("celsius").value = getCelcius(getTargetValue);
       }
       else if(getTarget ==="celsius"){
            document.getElementById("fahrenheit").value = getFarenheit(getTargetValue);
       }
    }

}

// Convert from c->f
function getFarenheit(c){
  var f =0;
  f = 1.8*c+32;
  return f;

}

//Convert from f->c
function getCelcius(f){
   var c = 0;
   c = (f-32)/1.8;
   return c;
}

//test if it is number
function isNumber(test){
    return !isNaN(parseFloat(test)) && isFinite(test); 
 }

JSFIDDLE

My JavaScript in not working in my temperature converter

4 Answers4