Re: Simple Calculation in Form - 3 textboxes - 1 function

jgwyman@xxxxxxxxx wrote:
Honestly , you code should be as follows: 

Honestly, don't.



 <HTML>

<HEAD>

<TITLE> "CALCULATE FUEL COST" </TITLE>

<SCRIPT LANGUAGE = "JavaScript"> 

The language attribute is deprecated whereas the type attribute is required.

  <SCRIPT type="javascript">


        function fuelCalculator() {
        var iPPG = document.getElementById("ppg").value ;

Support for DOM methods should be tested before attempting to use them. The forms collection is more widely supported and is probably better to use here.


        var iMPG = document.getElementById("mpg").value ;
        document.getElementById("cpg").value = parseFloat(iPPG) /
parseFloat(iMGP) ;

Don't allow auto-wrapping to wrap code, it will almost certainly introduce errors.


        }

</ script>
</head>
<Body>

<input type="text" id="ppg" value=0 /> </br> 

XHTML-style tags are invalid markup in an HTML document.

          <input type="text" id="ppg" value=0><br>


XHTML requires all tag and attribute names to be in lower case (but this isn't XHTML so it's of no consequence).


        <input type="text" id="mpg" value=0 /> </br>
        <input type="text" id="cpg" value=0 /> </br>

<button onclick="fuelCalculator();">Calculate</button> 

The default type for a button element is submit, so that should be:

  <button type="button" onclick="fuelCalculator();">Calculate</button>


It likely makes no difference outside a form, but it should be included as the button may find its way into a form (the OP has shown a preference to use a form) where its default type of submit will cause a problem.


</body>

</html>

Unless you're submitting the form you don't need the <form /> tag and

A form element isn't necessary but document.forms is more widely supported than getElementById. It is also easier to use to get references to form controls than using getElementById to get references to random elements.

e.g.

<script type="text/javascript">
  function fuelCalculator(f)
  {
    f.cpg.value = f.ppg.value/f.mpg.value;
  }
</script>

<form action="">
 <table>
  <tr>
   <td>Cents per gallon:</td>
   <td><input type="text" name="ppg" value=0></td>
  </tr><tr>
   <td>Miles per gallon:</td>
   <td><input type="text" name="mpg" value=0></td>
  </tr><tr>
   <td>Cents per mile:</td>
   <td><input type="text" name="cpg" value=0></td>
  </tr><tr>
   <td colspan="2" style="text-align:right;"><input type="button"
    value="Calculate"
    onclick="fuelCalculator(this.form);"></td>
   </tr>
 </table>
</form>


the old <input type=button" /> is slightly out dated as well. Remember

The only real difference between a button element and an input element type button is that buttons can have content, inputs can't. The OP has not indicated any requirement for content, so the use of a button is not indicated.

I don't think there is any intent to deprecate input type button so it is no more out of date than most other HTML elements.


with js all vars are objects, you need to hint to the engine what you
want it to do with them; hence parseFloat().

It is a good suggestion to validate input, however parseInt & parseFloat are pretty useless for that. Their primary purpose seems to be to remove trailing non-digit characters (such as units) from strings and return numbers.

 e.g.
      parseInt('25mpg') returns '25' as type number
      parseInt('2mpg5') returns '2' as type number



--
Zif
.