JavaScript Simple Multiplier Calculator


This example asks the user for two numbers and multiplies them together when the user clicks the button.

Before discussing how it works, we need to discuss variables in JavaScript and the naming of variables. JavaScript uses three basic data types: a number, text and boolean. For numbers, there is only one data type, a 64-bit floating point type. There is not integer type or any other number data type other than the 64-bit number. This means that the number 1 is the same as the number 1.0. A variable is a storage location in memory with a unique name. Variables are created with the var keyword. You can create variables without initial values, but it is a good idea to set it to something. var pageHits = 0;

Constants do not change. They are usually capitalized. const TAXRATE = .13;

An identifier is the name of your variable, constant or other JavaScript constructs. You create them. Use meaningful names. They must be at least one character in length. The first character must be either a letter, an underscore or a dollar sign. Each character after the first character can be a letter, underscore, dollar sign or a number. Spaces and special characters other than the underscore or dollar sign are not allowed anywhere in an identifier. Some people start their identifiers with an underscore if that identifier has a special meaning. Lower camel case identifiers have their first word all in lowercase and subsequent words in mixed case.

First Number:
Second number:

There are problems with our calculator. If the user enters any non-numbers into either the first or second number, JavaScript returns NaN. NaN means Not a Number. Also the user should not be able to enter anything in the result box that is under the Calculate button. If the user leaves either or both of the number boxes with nothing at all typed in, and presses the Calculate button, the calculator displays “0”. The input and output boxes are too big.

Below is the code we added to our header.php file in our WordPress site that loads our JavaScript file.

<script src="<?php echo get_template_directory_uri(); ?>/inc/assets/js/multiplycalculator.js"></script>

Below is the code that is in our JavaScript file multiplycalculator.js.

function multiplierCalculator() {
	var resultNum = 0;
	resultNum = document.getElementById("firstNumber").value * document.getElementById("secondNumber").value;
	document.getElementById("resultNumber").value = resultNum;
}

Convert to a Number

If we were adding instead of multiplying, we would have a problem. We would get an incorrect result. We would use the “+” to add the two strings together, not the two numbers. We would be concatenating strings, not adding numbers. The fix is to use a conversion function. There are two: parseInt and parseFloat. Also, we sould also be using the isNaN() function to test if the user entered a number or not. If they did not enter a number, we could set the value to zero. If you use parseInt() to convert a string containing a decimal number JavaScript assumes you don’t care about the fractional part and only returns the integer part. No error occurs. The code shown below is better, but is not implemented in this post.

function multiplierCalculator() {
	var resultNum = 0;
	var firstNum = parseFloat(document.getElementById("firstNumber").value);
	var secondNum = parseFloat(document.getElementById("secondNumber").value);
	if (isNaN(firstNum)) firstNum = 0;
	if (isNaN(secondNum)) secondNum = 0;
	resultNum = firstNum * secondNum;
	document.getElementById("resultNumber").value = resultNum;
}

Readonly Form Inputs

To fix the problem of allowing the website user the ability to enter text into the result box, we can use the readonly tag. Below is the single line of HTML that we should have used on this page, but didn’t.

<input type="text" id="resultNumber" readonly="readonly" />

Formatting

You can format the answer in the box if you need to. If you have a variable called myNumber you can show it with three decimal places: myNumber.toFixed(3)

You can make you number display as dollar currency simply by concatenating the dollar sign to it. Use the plus sign to concatenate strings: “$” + myNumber.toFixed(3)

Leave a comment

Your email address will not be published. Required fields are marked *