Simple Html Calculator – code program

Html Calculator – code program. This post is made to make a html calculator, which works on browser. A form is made whose name is assigned as calculator. The name attribute specifies the name of a form. Input type are included in the code for a form, which makes, ‘textfield’ and ‘button’. Every input field is specified with attribute value. The value attribute specifies the value of an <input> element. Eval() function, takes the expression and evaluates accordingly. On click’ is the event. It occurs when  the user clicks on an element. This is how the following below code is write to make html calculator.

Html Calculator
Html Calculator

Html Calculator – code program

<html>
<head>
    <title>Html calculator</title>
</head>
<body>
    <form name="calculator" >
    Solution<input type="textfield" name="ans" value="">
    <br>
    <input type="button" value="1" onClick="document.calculator.ans.value+='1'">
    <input type="button" value="2" onClick="document.calculator.ans.value+='2'">
    <input type="button" value="3" onClick="document.calculator.ans.value+='3'">
    <input type="button" value="+" onClick="document.calculator.ans.value+='+'">
    <br>
    <input type="button" value="4" onClick="document.calculator.ans.value+='4'">
    <input type="button" value="5" onClick="document.calculator.ans.value+='5'">
    <input type="button" value="6" onClick="document.calculator.ans.value+='6'">
    <input type="button" value="-" onClick="document.calculator.ans.value+='-'">
    <br>
    <input type="button" value="7" onClick="document.calculator.ans.value+='7'">
    <input type="button" value="8" onClick="document.calculator.ans.value+='8'">
    <input type="button" value="9" onClick="document.calculator.ans.value+='9'">
    <input type="button" value="*" onClick="document.calculator.ans.value+='*'">
    <br>
    <input type="button" value="0" onClick="document.calculator.ans.value+='0'">
    <input type="reset" value="Reset">
    <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
    </form>
    </body>
</html>

Output of Html Calculator – code program

Solution