temperature converter

[eddie2737]

My temperature converter converts Fahrenheit to Celsius fine but it wont convert Celsius to Fahrenheit please can someone help?

here is the code


<div style="text-align:center">
  <h2>Temperature Conversion Page</h2>
<script language="javascript" type="text/javascript">
   
   function Conversion()
{
    var tempInFahr = parseFloat(document.getElementById('fahrBox').value);
    tempInCelsius = (5/9) * (tempInFahr - 32);
    document.getElementById('celsiusBox').value= tempInCelsius;
}
 
   function Conversion()
{
    var tempInCelsius = parseFloat(document.getElementById('celsiusBox2').value);
    tempInFahr = (9/5) * (tempInCelsius 32);
    document.getElementById('fahrBox2').value= tempInCelsius;
}
</script>
     
         
<div id="outputDiv">
   <p> Enter a temperature in degrees Fahrenheit:<input type="text" id="fahrBox"            size="10" value="" />
   <input type="button" value="Fahr -> Celsius"
   onclick="Conversion();" /> equals
   <input type="text" id="celsiusBox" size="10" value="" /> degrees Celsius
   </P>
</div>

<div id="outputDiv">
   <p> Enter a temperature in degrees Celsius:<input type="text" id="celsiusBox2"            size="10" value="" />
   <input type="button" value="Celsius -> Farhrenheit"
   onclick="Conversion();" /> equals
   <input type="text" id="fahrBox2" size="10" value="" /> degrees Fahrenheit
   </P>
 </div>

[Sidewinder]

I'm thinking two functions named Conversion are ambiguous. Try using two different names and fixup the references accordingly.

Not very knowledgeable of HTML but are duplicate div nodes valid? (id="outputDiv")

 

[camerongray]

Your problem is that both functions are called Conversion - This will not work as you need to be able to identify the functions uniquely, you should change the name of them so you have one (for example) "convertCtoF" and another "convertFtoC" (It's generally accepted to start functions with a lower case character although it doesn't affect the actual functionality.

Also, you do not need to specify 'language="javascript"' since you use the type attribute, using language was the older way of doing things before the type attribute became standard.

The only other issue that doesn't affect the functionality is that you have 2 divs with an ID of "outputDiv" - An ID is designed to identify a single element so both of these IDs should be different.  Alternatively you can use a "class" attribute to identify multiple elements under the same name.

See updated code below - There appears to be a problem with the calculation to convert C to F but at least the function still works so it shouldn't be to hard to fix:

Code: [Select]

<div style="text-align:center">
  <h2>Temperature Conversion Page</h2>
<script type="text/javascript"> 
    function convertFtoC()
    {
        var tempInFahr = parseFloat(document.getElementById('fahrBox').value);
        tempInCelsius = (5/9) * (tempInFahr - 32);
        document.getElementById('celsiusBox').value= tempInCelsius;
    }
     
    function convertCtoF()
    {
        var tempInCelsius = parseFloat(document.getElementById('celsiusBox2').value);
        tempInFahr = (9/5) * (tempInCelsius + 32);
        document.getElementById('fahrBox2').value= tempInFahr;
    }
</script>
     
         
<div id="f-to-c" class="outputDiv">
   <p> Enter a temperature in degrees Fahrenheit:<input type="text" id="fahrBox"            size="10" value="" />
   <input type="button" value="Fahr -> Celsius"
   onclick="convertFtoC();" /> equals
   <input type="text" id="celsiusBox" size="10" value="" /> degrees Celsius
   </P>
</div>

<div id="c-to-f" class="outputDiv">
   <p> Enter a temperature in degrees Celsius:<input type="text" id="celsiusBox2"            size="10" value="" />
   <input type="button" value="Celsius -> Farhrenheit"
   onclick="convertCtoF();" /> equals
   <input type="text" id="fahrBox2" size="10" value="" /> degrees Fahrenheit
   </P>
 </div>