Next page | Contents page |

Programming that form

First a reminder of the HTML:

  <form id="calc">
    <input id="a" type="text" maxlength="8" style="width:70px">
    <select id="op">
      <option id="plus" selected> + plus</option>
      <option id="minus"> - minus</option>
      <option id="times"> x times</option>
      <option id="divide"> / over</option>
    <input id="b" type="text" maxlength="8" style="width:70px">
    <input type="button" onclick="calculate()" style="width:70px" value=" = ">
    <p id="calcresult">________</p> 
    <!-- The underscores make space on the page -->

Now for the JavaScript

Each of the 2 text input fields has to be read as a number. First get hold of the element by its id and then get its value as text:

  var aText = document.getElementById ("a").value;


Most programming languages make a strong distinction between whole numbers (integers) and those containing decimal points (floating point numbers). JavaScript does not - they are all just of type Number. However when it comes to parsing a text string to extract a number from it we do have to know whether a decimal point is allowed, so there are two functions: parseInt() and parseFloat().

A floating point number may also contain a power of 10. For example, -12.34 x 10-3. To be able to deal with that without using a superscript we write it as -12.34E-3 on computers (the E may be upper or lower case). Such numbers are often "normalised" so that there is just 1 digit before the point: -1.234E-2

Then parse that text as a number by using a predefined function, parseFloat():

  var a = parseFloat (aText);

That makes a floating-point number, one with a decimal point and possibly a power of ten, as opposed to an integer (a whole number).

To determine which option has been selected in the drop-down list first get the select element as usual:

  var selectEl = 
    document.getElementById ("op");

Then use a variable that is always part of such an element: selectedIndex, in order to determine which operation to perform. It will have values from 0 to 3 in our case, for the 4 option elements. Indexes and character positions in strings start at 0 in JavaScript.

  var ix = selectEl.selectedIndex;

We can then do a different calculation depending on the value of ix:

  var result;
  if (ix == 0) result = a + b;
  else if (ix == 1) result = a - b;
  else if (ix == 2) result = a * b;
  else if (ix == 3) result = a / b;
  else alert ("Impossible selected index = " + ix);

Finally display the result in the paragraph element by setting its innerHTML, as we have done before.

Conditional tests

These symbols are used for comparing a pair of values and getting a true/false result:

There are also some others in JavaScript - later.

HTML entities

If you embed JavaScript code within HTML you must be careful to write certain characters so that they cannot be confused with HTML symbols. There are 5 such characters:

This is another good reason to put your JavaScript in separate non-HTML files, as discussed earlier.

The entity notation (&...;) enables many other special characters to be written in HTML. But that is HTML, not JavaScript.

Next page | Contents page |