Arithmetic in JavaScript

An earlier program example asked the user for their name and said hello. To do this it added together three strings, "Hello", the user's name and a full stop ".":

alert("Hello " + userName + ".");

Let's try to do the same with numbers:

<html>
  <!-- Calculations -->
  <head>
    <title> Calculations </title>
  </head>
  <body>
    <!-- There's no need for a body at all -->
    <script>
      // Ask for two numbers and add them together.
      first = prompt("Enter a number:", "")
      second = prompt("Enter another number:", "")
      result = first + second
      document.write (first + " + " + second + " = " + result)
    </script>
  </body>
</html>

If you entered 1 and 2 as the two numbers then you'll see that you get a page saying:

1 + 2 = 12

Obviously wrong. It seems that the browser can't add up. Let's see if it knows how to multiply. Change your code to read:

      result = first * second
      document.write (first + " * " + second + " = " + result)

Run it and you should get a page with the right answer:

1 * 2 = 2

So it looks as though the browser can multiply but it can't add up. This seems odd to say the least.

Text and numbers

The problem here is being caused by the prompt method. The earlier example showed that this will display a message on the screen and give us the text that the user types into the box and the clue lies in the word "text". Whatever the user types into the box is going to be treated as though it's text. It doesn't matter whether the characters look like a name, a number or a date, the prompt will return it as text.

The browser knows what to do when it sees a "+" sign between two pieces of text - it has to put the two pieces together into a longer string of text and that's exactly what it does with "1" and "2". It concatenates the two strings to give "12" as the result.

That explains why the first program failed but not why the second program worked. The process runs much the same as before until the point where the program is deciding what to do with the two pieces of text it's had back from the prompts. Instead of a "+" it sees a "*" and it knows that this means that the two items have to be multiplied together. It also knows that this isn't possible so, rather than just giving up and displaying an error, the browser converts the two strings into their numeric equivalents and carries on with the calculation.

This is fine for multiplication but how do we cope with the original problem of addition? The answer is JavaScript's parseInt() function.

MS Access technical tips

Visual FoxPro technical tips

General Tips

 

More tips from Alvechurch Data

Search page for Alvechurch Data

Searching a web site with JavaScript

Read More

Site Map

Site map of the Alvechurch Data site

Read More

Javascript while loops

JavaScript do and while loops

Read More

Javascript for loops

Javascript for loops

Read More

Repetition in Javascript

JavaScript structures for repetition

Read More