KB User's Guide - Advanced HTML - Create an HTML Calculator

This document is a demonstration of how to insert fields in a KB document that allow users to perform simple calculations.

Example

=
0

Creating a Basic Calculator

Paste the following into the HTML Body field editor:


<form id="calc" oninput="updateOutput()">
<input name="x" value="0" type="number">
<select name="op" onchange="updateOutput()">
	<option value="0">+</option>
	<option value="1">−</option>
 	<option value="2">×</option>
	<option value="3">÷</option>
</select>
<input name="y" value="0" type="number">
<div class="equals"> = </div>
<output name="z" for="x y">0</output>
</form>
<br style="clear:both;">

Then, paste the following into the JavaScript/CSS field:


<!-- JAVASCRIPT -->
<script>
function updateOutput() {
//calculate
//get form
var form = document.getElementById("calc");
//get output
var out = form.elements["z"];
//get two numbers
//replace all instances of parseFloat with parseInt if needing to force integers
var num1 = parseFloat(form.elements["x"].value);
var num2 = parseFloat(form.elements["y"].value);
//get operator
var operator = parseFloat(form.elements["op"].value);
//set output depending on operator
switch(operator)
{
	//add
	case 0: out.value = num1+num2;
  	break;
  	//subtract
	case 1: out.value = num1-num2;
	break;
	//multiply
	case 2: out.value = num1*num2;
	break;
	//divide
	case 3: out.value = (num1/num2).toFixed(2);//only two digits after decimal place
	break;
	default:
  	break;
}
}

</script>

<!-- CSS -->

<style>
/*number inputs*/
#page-content input[type="number"], #viewDraft input[type="number"] {
width:50px; height:30px;
text-align:center;
margin:3px;
float:left;}

/*select and equals elements*/
#page-content select, #page-content  .equals, #viewDraft select, #viewDraft  .equals {
margin:3px;
float:left;}

/*output element*/
#page-content output, #viewDraft output {
display:block;
border:1px solid #333333;
border-radius:5px;
min-width:25px; height:25px;
margin:3px; padding:2px;
text-align:center;
background:#000000;
color:#ffffff;
float:left; }

</style>

Customizing the Calculator

Below are some common ways to customize the calculator. For each example, assume that any surrounding code not shown is present and unchanged from the original format above.

  • Note: The example calculators serve to illustrate changes to the input fields only; they will not process actual calculations. This method only allows one working calculator on the page.

Remove a Calculation Type

You can limit your calculator to only certain operations, e.g. only addition and subtraction. To do so, simply delete or comment out the options you'd like to exclude from the HTML.

In the example below, the options for multiplication and division have been removed:


<select name="op" onchange="updateOutput()">
	<option value="0">+</option>
	<option value="1">−</option>
</select>

Example:

=
0

Define Accepted Value Increments

You can specify the numeric increments that you expect to be input by end users, e.g. numbers that are a multiple of .25. Please note that this calculator does not contain a validator, so it will not actually reject any inputs; rather, it will simply highlight the input box in red if the user inputs something other than the desired increment (though this effect does not exist in all browsers).

In the example below, both input fields are set to look for values in increments of .25:


<form id="calc" oninput="updateOutput()">
<input name="x" value="0" type="number" step=".25" >
<select name="op" onchange="updateOutput()">
	<option value="0">+</option>
	<option value="1">−</option>
 	<option value="2">×</option>
	<option value="3">÷</option>
</select>
<input name="y" value="0" type="number" step=".25" >
<div class="equals"> = </div>
<output name="z" for="x y">0</output>
</form>
<br style="clear:both;">

Example:

=
0

Define a Default Input Value

You can set one of both input fields to default to a certain value other than zero, e.g. you want the first input field to initially display a value of 10 when the page first loads. Please note that this will not prevent the user from changing the default value, nor will it enforce any limits on the accepted value (i.e. the user can both increase and decrease the input value from the default).

In the example below, the first input field is set to default to a value of 10, and the second input field is set to default to a value of 5:


<form id="calc" oninput="updateOutput()">
<input name="x" value="10" type="number">
<select name="op" onchange="updateOutput()">
	<option value="0">+</option>
	<option value="1">−</option>
 	<option value="2">×</option>
	<option value="3">÷</option>
</select>
<input name="y" value="5" type="number">
<div class="equals"> = </div>
<output name="z" for="x y">0</output>
</form>
<br style="clear:both;">

Example:

=
0

Set Maximum/Minimum Restrictions on Input

You can specify minimum and/or maximum accepted values for your input fields, e.g. only allow values between 1 and 100. Please note that this calculator does not contain a validator, so it will not actually reject any inputs; rather, it will simply highlight the input box in red if the user inputs something outside of the desired range (though this effect does not exist in all browsers).

In the example below, the first input field is set to accept any number between 1 and 100, while the the second input value is set to accept any number higher than 5 (with no upper limit):


<form id="calc" oninput="updateOutput()">
<input name="x" value="0" type="number" min="1" max="100" >
<select name="op" onchange="updateOutput()">
	<option value="0">+</option>
	<option value="1">−</option>
 	<option value="2">×</option>
	<option value="3">÷</option>
</select>
<input name="y" value="0" type="number" min="5" >
<div class="equals"> = </div>
<output name="z" for="x y">0</output>
</form>
<br style="clear:both;">

Example:

=
0

Process Values as Integers (Remove Decimals)

You can set the calculator to ignore any input decimals and only process values as integers, e.g. process 2.1+3.2 as 2+3. Please not that this simply removes any numbers after the decimal point; it does not round up to the closest integer. Additionally, this only pertains to inputs, so if you are allowing division, the output can still include a decimal.

To do this, make the following changes to these lines of JavaScript (leaving all other JavaScript as-is):


//replace all instances of parseFloat with parseInt if needing to force integers
var num1 = parseInt(form.elements["x"].value);
var num2 = parseInt(form.elements["y"].value);
//get operator
var operator = parseInt(form.elements["op"].value);

This calculator is based on the following guide: http://www.developerdrive.com/2012/06/creating-a-web-page-calculator-using-the-html5-output-element/




Keywords:web calculate calculations css javascript addition subtraction multiplication multiply division divide   Doc ID:60307
Owner:Leah S.Group:KB User's Guide
Created:2016-01-29 14:24 CDTUpdated:2016-08-29 16:33 CDT
Sites:KB Demo, KB User's Guide
Feedback:  0   1