How to Create a Calculations Web Page

by Deborah Lee Soltesz

Web page calculators are a fun way to give your visitors a handy tool for doing a little quick math without pulling out their slide rulers. Calculators add a bit of fun and pizzazz to your website. If you are promoting a product or service, calculators can help you get your message to your customers and generate repeat visitors. JavaScript lets you create calculations right on your web page, using numbers your visitors type into an HTML form. This simple calculator is the starting point for designing your own custom web page calculator.

1

Open the web page where you’d like your calculator.

2

Copy the following script into the header section of the page (between the <head> and </head> tags above the <body> tag).

&lt;script type=\&quot;text/javascript\&quot; language=\&quot;Javascript\&quot;&gt;

var v1 = 0

GO var v2 = 0 GO var answer = 0 GO

function calculate () {
  // The Calculation: change operator in this equation to change the calculation
  answer = v1 + v2

GO

  var elem

GO elem = document.getElementById(\"v1\") GO elem.value = v1 GO elem = document.getElementById(\"v2\") GO elem.value = v2 GO

  elem = document.getElementById(\&quot;answer\&quot;)

GO elem.value = answer GO }

function setValue(elem) {
  var val = 0.0

GO if (elem.value != \"\") { val = parseFloat(elem.value) GO } else { val = 0.0 GO } switch (elem.id) { case \"v1\": v1 = val; break GO case \"v2\": v2 = val; break GO } calculate() GO } </script>

3

Add the attribute onload=\"calculate();\" to the <body> tag, so it looks this: <body onload=\"calculate();\">. If there are other attributes in the body tag, don’t delete them, just add the new onload attribute.

4

In the body of your web page, add the following HTML form where you would like to have the calculator appear:

<form> <input type=\"text\" id=\"v1\" onKeyUp=\"javascript: setValue(this);\"> + <input type=\"text\" id=\"v2\" onKeyUp=\"javascript: setValue(this);\"> = <input type=\"text\" id=\"answer\" readonly> </form>

5

Change the calculation by changing the line “answer = v1 + v2” in the JavaScript section. For example, if you would like to multiply instead of add, change the plus sign to an asterisk (*) like this:

answer = v1 * v2

Update the HTML form to show the new calculation.

Tips

  • check Add text, style and color to the calculation form. Lay out the input tags the way you want them to appear. Add descriptions to the input fields. Put a red outline around the answer. Be creative.
  • check Experiment with the JavaScript and HTML form. Do you need to perform a calculation on more than two numbers? For every line of code that has a “v2” (except The Calculation line) copy the code to a new line and change “v2” to “v3.” Add the new “v3” value to the calculation in the Javascript, like this: “answer = v1 + v2 + v3.”

Items you will need

About the Author

Deborah Lee Soltesz is a web developer who has been creating websites, promotional materials and information products since 1992. Soltesz has a Bachelor of Science in computer science and engineering. She worked in earth and space science research writing for scientific and general audiences for more than a decade.