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>
</select><br>
<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 -->
</form>
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.
These symbols are used for comparing a pair of values and getting a true/false result:
There are also some others in JavaScript - later.
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.