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>
Really nice information, thanks for sharing that to me.
ReplyDeleteLatest Website Trends
thanks for sharing bro
ReplyDeleteThank you so much
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteawesome
ReplyDeletepody maire
ReplyDeleteachannte andii
ReplyDeleteLooking for a boyfriend. Only interested in Men with black skin tone having huge anaconda C**k. Interested person can contact me or whatsapp at 9481986545(TOM THOMAS)
ReplyDeleteThanks for sharing information...
ReplyDeletejavascript training in hyderabad
Please check your code alert massages wrong :
ReplyDeletefunction 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
}