hey Im working on a temperature converter done in javascript. the program lets you enter a value then there are 2 buttons one for "f to c" one for "c to f" I cant figure out how to use both buttons and the functions ive created. I can get one to work but not both. here is my code:

<!doctype html>
<html>
<head>
<style>
#result { color: red; font-weight: bold; font-size: 16 px; }
#fahrenheit { color: blue; font-weight: bold; font-size: 16 px; }
</style>


<head>
<body>
<h1> Temp Converter </h1>
<form method="post" >

<!-- create a text input element -->
<p>Temperature to convert: <input type="text" name="box_temp"
id="box_temp" value="0" /> </p>

<p>
<input type="button" value="C to F" id="ctof" />
<input type="button" value="F to C" id="ftoc" />
<input type="reset" value="Clear" /></p>

</form>
<p id="farenheit"></p>
<p id="celcius"></p>
<p id="result"></p>
<script>

//read length and width and calculate area

document.getElementById("ctof").onclick = function(){
//read length and report the value
var this_temp = document.getElementById("box_temp").value;

//document.getElementById("ftoc").onclick = function(){
//read length and report the value
//var this_temp = document.getElementById("box_temp").value;
//read width and report the value

// check for valid input values
if (isNaN(this_temp) || this_temp < 0) {
//alert("Invalid temp!");
//use the "result" element to display the error
document.getElementById("result").innerHTML= "Invalid temp!";
//clear the value
document.getElementById("box_temp").value = "";
//set focus
//cleat value
document.getElementById("box_temp").focus();
} else {




//calculate area
var newFahren = (this_temp)* (1.8)+(32);

//alert("Fahrenheit temp: " + newFahren);
document.getElementById("farenheit").innerHTML= "The Fahrenheit temp is "+ newFahren;

document.getElementById("result").innerHTML= "";
}


}






// not sure how to use this function as well


// document.getElementById("ftoc").onclick = function(){
//read length and report the value
// var this_temp = document.getElementById("box_temp").value;
//read width and report the value

// check for valid input values
if (isNaN(this_temp) || this_temp < 0) {
//alert("Invalid temp!");
//use the "result" element to display the error
document.getElementById("result").innerHTML= "Invalid temp!";
//clear the value
document.getElementById("box_temp").value = "";
//set focus
//cleat value
document.getElementById("box_temp").focus();
} else {
//calculate area
var newCelcius = ((this_temp)-32)/(1.8);


document.getElementById("farenheit").innerHTML= "The Celcius temp is "+ newCelcius;

document.getElementById("result").innerHTML= "";
};
</script>
</body>
</html>




any help on how to either join the function or on how to use either button independently