Internet, Networking, & Security Web Development Calculator Script How to put a calculator on your site by Linda Roeder Writer Former Lifewire writer Linda Roeder is a longtime web enthusiast and consultant with a broad knowledge of how personal web pages, blogs, and social networking. our editorial process LinkedIn Linda Roeder Updated on October 19, 2019 Kick Images / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email Want to have a calculator right on your Web page? Start by copying this template below. You may have to copy and paste the code in two sections if there is a commercial in the way. You don't want to copy and paste the commercial and the code around it. Then paste the HTML code in your HTML editor. Copy and Paste JavaSript For a Calculator Put This Code In The HEAD of Your Page. Start copying here: <STYLE type="text;css">.calcBtn{font-weight : bold/width: 32px;height: 32px;}</style><script language="JavaScript">function Calculator_OnClick(keyStr){var resultsField = document.calculator.calcResults;switch (keyStr){case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":case "8":case "9":case "0":case ".":if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator)){resultsField.value = keyStr;}else{// ignore extra decimalsif ((keyStr!=".") || (resultsField.value.indexOf(".")<0)){resultsField.value += keyStr;}}this.lastOp = this.opNumber;break;case "*":case "/":case "+":case "-":if (this.lastOp==this.opNumber)this.Calc();this.evalStr += resultsField.value + keyStr;this.lastOp = this.opOperator;break;case "=":this.Calc();this.lastOp = this.opClear;break;case "c":resultsField.value = "0";this.lastOp = this.opClear;break;default:alert("'" + keyStr + "' not recognized.");}}function Calculator_Calc(){var resultsField = document.calculator.calcResults;//alert("eval:"+this.evalStr+resultsField.value);resultsField.value = eval(this.evalStr+resultsField.value);this.evalStr = "";}function Calculator(){this.evalStr = "";this.opNumber = 0;this.opOperator = 1;this.opClear = 2;this.lastOp = this.opClear;this.OnClick = Calculator_OnClick;this.Calc = Calculator_Calc;}gCalculator = new Calculator();</script>------------------------------------------------------------------------------- Put This Part In the BODY of Your Page. Start copying this part here: <form name="calculator"><table border="2" cellpadding="4" cellspacing="0" bordercolor="#000000"><tr><td><table border="0" cellpadding="2" cellspacing="0" width="100%"><tr><td colspan="4"><input type="text" name="calcResults" value="0" size="20" style="text-align: right"></td></tr><tr><td><input class="calcBtn" type="button" value=" C " name="calclear" onclick="gCalculator.OnClick('c')"></td><td></td><td> </td><td><input class="calcBtn" type="button" value=" = " name="calequal" onclick="gCalculator.OnClick('=')"></td></tr><tr><td><input class="calcBtn" type="button" value=" 7 " name="cal7" onclick="gCalculator.OnClick('7')" ondblclick="gCalculator.OnClick('7')"></td><td><input class="calcBtn" type="button" value=" 8 " name="cal8" onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')"> </td><td><input class="calcBtn" type="button" value=" 9 " name="cal9" onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')"> </td><td><input class="calcBtn" type="button" value=" / " name="caldiv" onclick="gCalculator.OnClick('/')"></td></tr><tr><td><input class="calcBtn" type="button" value=" 4 " name="cal4" onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')"> </td><td><input class="calcBtn" type="button" value=" 5 " name="cal5" onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')"> </td><td><input class="calcBtn" type="button" value=" 6 " name="cal6" onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')"> </td><td><input class="calcBtn" type="button" value=" * " name="calmul" onclick="gCalculator.OnClick('*')"></td></tr><tr><td><input class="calcBtn" type="button" value=" 1 " name="cal1" onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')"> </td><td><input class="calcBtn" type="button" value=" 2 " name="cal2" onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')"> </td><td><input class="calcBtn" type="button" value=" 3 " name="cal3" onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')"> </td><td><input class="calcBtn" type="button" value=" + " name="calplus" onclick="gCalculator.OnClick('+')"></td></tr><tr><td> </td><td><input class="calcBtn" type="button" value=" 0 " name="cal0" onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')"> </td><td><input class="calcBtn" type="button" value=" . " name="caldec" onclick="gCalculator.OnClick('.')"></td><td><input class="calcBtn" type="button" value=" - " name="calminus" onclick="gCalculator.OnClick('-')"></td></tr></table></td></tr></table></form> Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit