How to Make a Javascript Calculator for Your Blog or Website

A fun gadget you can add to your website or blog is a simple five-function calculator -- one that includes addition, subtraction, multiplication, division, and exponentiation. If you own an online store or write an educational blog, many of your visitors will find an on-screen calculator quite useful.

It's easy to include a javascript web calc among your sidebar widgets, or embed the tool in its own page. All you need to do is copy the two pieces of code below, then add your own CSS attributes to make the calculator match your website's design.  Here is an example of the calculator embedded in a blog.

This is the "brains" of the code, the part that determines how the calculator will function.  In the head section of your page's HTML source, type the javascript beginning and ending tags on two separate lines:

<script type="text/javascript"><!--

//--></script>

Then copy the javascript code below and paste it between the script tags.

function adding(form) {a=eval(form.a.value);b=eval(form.b.value);form.c.value=a+b;} function subtracting(form) {a=eval(form.a.value);b=eval(form.b.value);form.c.value=a-b;} function multiplying(form) {a=eval(form.a.value);b=eval(form.b.value);form.c.value=a*b;} function dividing(form) {a=eval(form.a.value);b=eval(form.b.value);form.c.value=a/b;} function raising(form) {a=eval(form.a.value);b=eval(form.b.value);form.c.value=Math.pow(a,b);}

This is the code that determines what your calculcator will look like, the "body" of the calculator. Find the section of your page where you want the calculator to appear, and type these lines of HTML:

<form><table><tr><td align="center">
<p>A = <input name="a" type="text"><br/>
B = <input name="b" type="text"><br/>
<input type="button" onclick="adding(this.form)" value="A + B" >
<input type="button" onclick="subtracting(this.form)" value="A - B">
<input type="button" onclick="multiplying(this.form)" value="A x B"><br/>
<input type="button" onclick="dividing(this.form)" value="A / B">
<input type="button" onclick="raising(this.form)" value="A ^ B">
<input type="button" onclick="reset(this.form)" value="Clear"><br/>
<input name="c" type="text"></p></td></tr></table></form>

Notice there are no CSS styles or widths specified. If you use this code without any alterations, you will still have a functional calculator, but it won't look very pretty. Add borders, fixed widths, background colors, etc. to make the online calculator attractive.

To use the javascript calculator, enter numbers in the blanks for A and B, then click one of the five operation buttons.  The answer will appear in the bottom blank.