hello Im new to this board and to javascript. Ive created a temperature converter that allows you to enter a value into a text box and then gives you two buttons one for converting the value from "C to F"(celcius,fahrenheit) and one for "F to C"

The only way I have gotten both buttons and functions to work is by adding two scripts. Is there a way I can do this in one? Can I combine the two scripts or parts of them together? I tried initially doing them in one script but couldnt figure out how to allow either function to be used. When I included both functions the code wouldnt work. here is my code:
javascript 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; }
#celcius { color: green; font-weight: bold; font-size: 16 px; }
</style>
 
 
  <head>
  <body>
  <h1> Temp Converter </h1>
  <form method="post" >
 
  <!-- create a text input element -->
  <p>Value 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="fahrenheit"></p>
    <p id="celcius"></p>
    <p id="result"></p>
     <script>
 
     //read  
 
     document.getElementById("ctof").onclick = function(){       
     var this_temp = document.getElementById("box_temp").value;
 
  // document.getElementById("ftoc").onclick = function(){       
  // var this_temp = document.getElementById("box_temp").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);
     var newCelcius = ((this_temp)-32)/(1.8);
 
 
      document.getElementById("fahrenheit").innerHTML= "The Fahrenheit temp is "+ newFahren;
     // document.getElementById("celcius").innerHTML= "The Celcius temp is "+ newCelcius;
      document.getElementById("result").innerHTML= "";
      }   
 
 
};
  </script>
  <script>
    document.getElementById("ftoc").onclick = function(){       
    var this_temp = document.getElementById("box_temp").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
	    	//clear value
	    	document.getElementById("box_temp").focus();
	  }  else {
 
 
  //calculate area
 
     var newCelcius = ((this_temp)-32)/(1.8);
 
 
 
      document.getElementById("celcius").innerHTML= "The Celcius temp is "+ newCelcius;
      document.getElementById("result").innerHTML= "";
      }   
 
 
};
  </script>
    </body>
    </html>

also is there a way to use the clear button that I have to not only cleat the text box but also the results from the functions?
Any help is appreciated!