Search This Blog

Sunday 22 July 2018

4. Create a webpage with two textboxes and command buttons to perform arithmetic operations and display the result in appropriate dialog boxes using JavaScript.


<html>
 <head>
  <title>Arithmetic Operations</title>
  <style type="text/css">
  input { height:25px; width:100px; color:blue}
  th { text-align:left;}
  </style>

 </head>
 <body bgcolor=beige text=blue>
 <center>
 <h1> <u>ARITHMETIC OPERATIONS</u></h1>
 <form>

 <table bgcolor=gray>
 <tr><th>Enter 1st Number</th><th><input type="text" size=10 name=text1></th><tr>
<tr><th>Enter 2nd Number</th><th><input type="text" size=10 name=text2></th><tr>
 </table><br>

  <input type=button value="ADD" onClick="add()">
  <input type=button value="SUBTRACT"  onClick="sub()"><br>
  <input type=button value="MULTIPLY" onClick="multiply()">
  <input type=button value="DIVIDE" onClick="divide()"><br>

 </form>

<script language="JavaScript">
function add()
{
    var result = eval(document.forms[0].elements[0].value) + eval(document.forms[0].elements[1].value);
    alert("SUM = " + result);
}
function sub()
{
    var result = eval(document.forms[0].elements[0].value) - eval(document.forms[0].elements[1].value);
    alert("DIFFERENCE = " + result);
}
function multiply()
{
    var result = eval(document.forms[0].elements[0].value) * eval(document.forms[0].elements[1].value);
    alert("PRODUCT = " + result);
}
function divide()
{
    var result = eval(document.forms[0].elements[0].value) / eval(document.forms[0].elements[1].value);
    alert("QUOTIENT = " + result);
}
</script>
 </center>
 </body>
</html>

No comments :

Post a Comment

FREE Hit Counters