<html> <head> <title>HTML Program </title>
<script>
function calculate(t1,t2)
{
alert("product
is" + (t1.value *
t2.value));
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>
cellspacing=11>
<tr style="font-size:22;">
<td>Enter first integer </td>
<td><input
type=text name=txt1>
type=text name=txt1>
</tr>
<tr style="font-size:22;">
<td>Enter second integer </td>
<td><input
type=text name=txt2>
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>
cellspacing=11>
<tr style="font-size:22;">
<td>Enter first integer </td>
<td><input
type=text name=txt1>
type=text name=txt1>
</tr>
<tr style="font-size:22;">
<td>Enter second integer </td>
<td><input
type=text name=txt2>
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>
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?
clear button?
<html>
<head>
<title>HTML Program</title>
<script >
function calculate(t1,t2,btn1,btn2)
{
t2.value=eval(t1.value);
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>
cellspacing=11>
<tr >
<td style="font-size:22;">Enter mathematical
expression </td>
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;">
type=text name=txtresult style="font-size:22;">
</tr>
0 Comments