JavaScript Program to Create Simple Calculator Using HTML Form

JavaScript Program to Create Simple Calculator Using HTML Form

Write a JavaScript program to create simple calculator using html form.



Source Code
<html>
<head>
    <title>Arithmetic Operations using Form</title>
</head>
<body>
    <script>
    function add() 
    {
        var a = parseInt(document.getElementById('num1').value);
        var b = parseInt(document.getElementById('num2').value);
        var result = a+b;
        document.getElementById('result').innerHTML = result;
    }
    function sub() 
    {
        var a = parseInt(document.getElementById('num1').value);
        var b = parseInt(document.getElementById('num2').value);
        var result = a-b;
        document.getElementById('result').innerHTML = result;
    }
    function mul() 
    {
        var a = parseInt(document.getElementById('num1').value);
        var b = parseInt(document.getElementById('num2').value);
        var result = a*b;
        document.getElementById('result').innerHTML = result;
    }
    function div() 
    {
        var a = parseInt(document.getElementById('num1').value);
        var b = parseInt(document.getElementById('num2').value);
        var result = a/b;
        document.getElementById('result').innerHTML = result;
    }
    </script>

<form style="margin:auto;max-width:500px;">
    <label>First no.    </label>
    <input type="text" id="num1"/><br/><br/>
    <label>Second no.</label>
    <input type="text" id="num2"/><br/><br/>
    <input type="button" onClick="add();" value="ADD"/>    
    <input type="button" onClick="sub();" value="SUB"/><br/><br/>
    <input type="button" onClick="mul();" value="MUL"/>    
    <input type="button" onClick="div();" value="DIV"/>
</form>

<p>The result is: 
<span id="result" style="color:red;">NONE</span>
</body>
</html>
Output