Do More Web & Search Calculator Script How to put a calculator on your site Share Pin Email Print Kick Images / Getty Images Web & Search Running a Website Best of the Web Search Engines Safety & Privacy by Linda Roeder 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. Updated October 19, 2019 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> Continue Reading