将值从一个函数移到另一个函数

Question

I am new to javascript and I am trying to learn the programming language. I created a quick website that converts temperature from fahrenheit to Celsius and I am using javascript to do the conversion. I know that it does not have to be broken into two different functions but I though I would start simple and build towards more complex. The code I am using to complete the conversion is:

 function toCelcius(){ var temp = document.getElementById("tempConversion").value; var dif = calculate(temp); var c = (5/9) * dif; document.getElementById("answer").innerHTML = c; } function calculate(temp){ var dif = temp - 32; document.getElementById("firstCalc").innerHTML = dif; } 

I know that NaN means not a number so I am assuming that the line, var dif = calculation(temp), is not defined properly. Unfortunately, I do not understand why and could use your help understanding.

Thank you very much.

Answer 1

function calculate(temp){
    var dif = temp - 32;
    document.getElementById("firstCalc").innerHTML = dif;
    return dif; // return the value here...
}

function toCelcius(){
    var temp = document.getElementById("tempConversion").value;
    var dif = calculate(temp); // returned value will be assigned in "dif"
    var c = (5/9) * dif;
    document.getElementById("answer").innerHTML = c;
}

Answer 2

Your function calculate(temp) is not returning a value which is being needed. As a result, dif will be undefined and it will give you NaN when you perform any arithmetic operations there.

Update you function like this -

function calculate(temp){

    var dif = temp - 32;

    document.getElementById("firstCalc").innerHTML = dif;
    return dif;

}

Answer 3

When getting a value back from a function, instead of setting a variable, try using return like I did. Note that in calculate() , the variable doesn't have to be named dif . Really try to understand what's happening here, as a more complete understanding will help you in the long run.

 function toCelcius(){ var temp = document.getElementById("tempConversion").value; var dif = calculate(temp); var c = (5/9) * dif; document.getElementById("answer").innerHTML = c; } function calculate(temp){ var dif = temp - 32; document.getElementById("firstCalc").innerHTML = dif; return dif; } 

 <input type="text" id="tempConversion"></input> <br/> <button type="button" onClick="toCelcius();">Convert</button> <br/> <span id="firstCalc"></span> <br/> <span id="answer"></span> 

Essentially, since you didn't use return , no matter whet you set dif to (not to mention that using var separated the two dif variables, so the first one wouldn't get set), it would immediately get set to what you returned from calculate() -- which was undefined .