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
