The following code displays two fields for taking two input numbers and there are separate buttons for four arithmetic operations.When Clicked on a button,alert message is displayed with result and result is also updated in the page.
Four JavaScript functions are defined in the script tag.Four functions are used for addition,subtraction,multiplication,division.Four Separate buttons are defined in the body tag.The values of the four buttons are Addition,Subtraction,Deletion and Multiplication.
When a user clicks on the button with value Addition,Addition function is called.Addition function takes the values from the two input fields and performs addition,then alert message is displayed with result and result is also displayed in the webpage.
Check The Live
Demo here or Copy,paste this url http://jsfiddle.net/6JmuY/
<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Addition()
{
x=parseFloat(calc.value1.value);
y=parseFloat(calc.value2.value);
z=(x+y);
alert("The Addition result is"+z);
calc.value3.value=z
}
function Subtraction()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x-y;
alert("The subtraction result is "+z);
calc.value3.value=z
}
function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x*y;
alert("The Multiplication result is "+z);
calc.value3.value=z
}
function Division()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x/y;
alert("The subtraction result is "+z);
calc.value3.value=z
}
</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value : <input type="number" id="value1"> </br>
Enter Second Numeric Value : <input type="number" id="value2"> </br>
</br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
<input type="button" Value="Addition" onClick=Addition()> </br>
<input type="button" Value="Subtraction" onClick=Subtraction()></br>
<input type="button" Value="Multiplication" onClick=Multiplication()></br>
<input type="button" Value="Division" onClick=Division()></br>
</form>
</body>
</html>
