Can't figure out the javascript

Discussion in 'JavaScript' started by Luke Watson, Oct 1, 2010.

  1. #1
    Hello i am at the moment making a javascript temperature converter where the user keys in a number and can convert it to either Celsius or Fahrenheit by clicking on either one of the radio buttons. I'm not sure how to code it in so it displays this for the user.

    Here is my code so far,

    
    <!-- Temperature Converter -->
    <html>
     <head>
      <title>Temperature Converter</title>
      <style type="text/css">
       body {
              background-color: #000000;
              color: #FFFFFF;
              text-align: center;
              font-size: 25;
            }
      </style>
    
      <script type="text/javascript">
        
        function convert()
      {
    
      if (document.frm.txtTemp.value == "")
             {
                alert("Please enter a temperature");
                document.frm.txtTemp.focus();
             }
             else if (document.frm.txtTemp.value != parseFloat(document.frm.txtTemp.value))
             {
                alert("Your temperature must be a number");
                document.frm.txtTemp.focus();
             }
             else if (document.frm.Cels.Faren.value == "")
             {
                alert("Please select one of the radio buttons");
                document.frm.Cels.Faren.focus();
             }
    
      }
    
      function clean()
           {
             //alert("in clean");
             document.frm.txtTemp.value = "";
             document.frm.txtTemp.value = "";
             document.frm.readonly.value = "";
             document.frm.txtTemp.focus();
             document.frm.txtTemp.focus();
           }
    
       </script>
    
     </head>
     <body onload="window.document.frm.txtTemp.focus()">
    
      <h1>Temperature Converter</h1>
      <form name="frm"> 
        <tr><td>Enter a temperature:&nbsp;&nbsp;</td>
        <td><input type=text name="txtTemp" size=12"></td>
        <br /><br />
        <td>
        <input type="radio" name="Cels" value="Celsius" class="radio" /> Celsius<br />
        <input type="radio" name="Faren" value="Fahrenheit" class="radio" /> Fahrenheit
        </td>
    
        <br /><br />
        <input type="button" name="cmdConvert" value="Convert" onclick="convert()">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" name="cmdClear" value="Reset" onClick="clean()">
        <br /><br /><br />
        <input type=text name="readonly" size="12" disabled="READONLY" />
       </form>
    
     </body>
    </html>  
    
    Code (markup):
    Many thanks to whoever can help me.
     
    Luke Watson, Oct 1, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Is this a homework question? It's not a very original one, there are so many examples you could copy from! :D

    The radio buttons only toggle if they have the same name, so use something like name="units" for both.
    The radio buttons have a "radio" class but there is no such class in the style.
    The clean() function has two repeated lines that should be removed.
    Instead of a warning about no radio button being selected, just set one as the default. Also, I'd make it clear what unit is being converted.
    Put return; at the end of each test so the convert() function exits if the conditions are not met. Better yet, have a separate test function.

    You can find the conversion equations at Wikipedia - Celsius. For the conversion process, try this:
    
    var temp = parseFloat(document.frm.txtTemp.value);
    if (document.frm.units[0].checked) {
    	temp = (temp * 1.8) + 32;
    	document.frm.result.value = temp.toFixed(2) + " F";
    }
    else {
    	temp = (temp - 32) / 1.8;  
    	document.frm.result.value = temp.toFixed(2) + " C";
    }
    
    Code (markup):
     
    Last edited: Oct 1, 2010
    Cash Nebula, Oct 1, 2010 IP