Passing text box object to the function

<html> <head> <title>HTML Program </title>
  <script>
    function calculate(t1,t2)
      {
        alert("product
is"
+ (t1.value *
t2.value));
        t1.value= ""
        t2.value="";
        t1.focus();
      }
    </script>
</head>
<body >
<br><br>
 <form>
<table style="border-style:solid;border-color:aqua;border-width:5;" cellpadding=11
cellspacing=11>
<tr style="font-size:22;">
    <td>Enter first integer </td>
    <td><input
type=text name=txt1>
</tr>
<tr style="font-size:22;">
    <td>Enter second integer </td>
    <td><input
type=text name=txt2>
</tr>
<tr colspan=2>
<td align=center><input type=button value="Calculate Product" style="font-size:22;" onClick="calculate(txt1,txt2);" ></td>
</tr>
</table> </form> </body> </html>

Here, The ouput is same as in Previous example

Q. Design a page which display to textboxes for entering 2 integers. Display a calculate product button and a clear button. On the click of the clear button, clear all the textboxes and set the focus in the first textbox?
<html> <head> <title>HTML Program </title>
 <script>
    function calculate(t1,t2)
      {
alert("Product is " +(t1 * t2));
      }
</script> </head>
<body>
<br><br>
 <form>
<table style="border-style:solid;border-color:aqua;border-width:5;" cellpadding=11
cellspacing=11>
<tr style="font-size:22;">
    <td>Enter first integer </td>
    <td><input
type=text name=txt1>
</tr>
<tr style="font-size:22;">
    <td>Enter second integer </td>
    <td><input
type=text name=txt2>
</tr>
<tr>
<td align=center><input type=button value="Calculate Product" style="font-size:22;" onClick="calculate(txt1.value,txt2.value);" ></td>
<td align=center><input type=reset value="clear" style="font-size:22;" onClick="txt1.focus();" ></td>
</tr>
</table> </form> </body> </html>

OUTPUT: 

Q. Design a page which display a text box for entering a mathematical expression print the result of the mathematical expression in another textbox. The page should also have a
clear button?
<html>
<head>
  <title>HTML Program</title>
  <script >
    function calculate(t1,t2,btn1,btn2)
      {
t2.value=eval(t1.value);
        btn1.disabled=true;
        btn2.disabled=false;
      }
    function btnenabled(btn1,btn2,t1)
{
    btn1.disabled=false;
    btn2.disabled=true;
    t1.focus();
}
</script>
</head>
<body >
<br><br>
 <form>
<table style="border-style:solid;border-color:aqua;border-width:7;" cellpadding=11
cellspacing=11>
<tr >
    <td style="font-size:22;">Enter mathematical
expression
</td>
    <td ><input type=text name=txt1 style="font-size:22;font-weight:bold;">
</tr>
<tr>
<td align=center><input type=button name=btncalculate value="Calculate"  onClick="calculate(txt1,txtresult,btncalculate,btnclear);" style="font-size:22;font-family:candara;font-weight:bold;border-style:solid;border-color:blue;border-width:5;"></td>
<td align=center><input type=reset name=btnclear value="Clear" onClick="btnenabled(btncalculate,btnclear,txt1);" disabled style="font-size:22;font-family:candara;font-weight:bold;border-style:solid;border-color:blue;border-width:5;" ></td>
</tr>

<tr style="font-size:22;">
    <td align=center>Result </td>
    <td><input
type=text name=txtresult style="font-size:22;">
</tr>
</table> </form> </body> </html>

OUTPUT: 

Post a Comment

0 Comments