Create a new HTML page with a script element inside the head.  Save it as jsarithmetic.html.  Put this function inside the script element:

function doTheMath(operatorToUse){
    var firstNumber=23;
    var secondNumber=8;
    if (operatorToUse=='add') {
        var theAnswer=firstNumber+secondNumber;
        var additionalWord='to';
    if (operatorToUse=='subtract') {
        var theAnswer=firstNumber-secondNumber;
        var additionalWord='from';
    if (operatorToUse=='multiply') {
        var theAnswer=firstNumber*secondNumber;
        var additionalWord='with';
    if (operatorToUse=='divide') {
        var theAnswer=firstNumber/secondNumber;
        var additionalWord='by';
    alert('When you '+operatorToUse+' '+firstNumber+' '+additionalWord+' '+secondNumber+' you get '+theAnswer);

Don't be panicked by the fact there is a lot of code as almost all of it you have seen before.  It will be explained soon but first add the event triggers inside the body element:

<p onmouseup="doTheMath('add');">Add</p>
<p onmouseup="doTheMath('subtract');">Subtract</p>
<p onmouseup="doTheMath('multiply');">Multiply</p>
<p onmouseup="doTheMath('divide');">Divide</p>

This is what will happen:

  1. when you click on one of the paragraphs the function is called and a parameter is passed to it (e.g. add)
  2. inside the function two numbers are stored into two variables
  3. there are four if statements but only one will do anything
  4. inside the if statements the arithmetic is done using one of the four common arithmetic operators (+ - * and /) and the answer is stored
  5. another variable stores some text which will be used int he answer
  6. at the end the answer is displayed using some fairly nasty concatenation

Save and try.  Make sure you understand all of the code before you move on.

After thoughts

There are two things to note: