In this article I would like to share with you a sample program to solve the area of the rectangle using JavaScript. The code is very short and easy to understand I wrote this code using the time I am still working as a college IT instructor. I hope you will find my work useful. Thank you.
Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<html>
<title> Area of a Rectangle Solver 1.0
</title>
<body bgcolor="yellow">
<font color="blue" face="Comic Sans MS" size="5">
<center>
<br>
Area of a Rectangle Solver 1.0
<br>
</center>
</font>
<style type="text/css">
.labelText {
text-align : right;
padding-right : 3px;
color : blue;
font-family :"Comic Sans MS";
font-size : 18px;
}
</style>
<form name="rectangle" method="post">
<table>
<tr>
<tr>
<td> </td>
</tr>
<td class="labelText"> Enter the Width
</td>
<td> <input type="text" name="width" size="10"/> </td>
</tr>
<td class="labelText"> Enter the Height
</td>
<td> <input type="text" name="height" size="10"/> </td>
</tr>
<tr>
<td> </td>
</tr>
</td>
<tr>
<td class="labelText">
The area of the rectangle is
</td>
<td>
<input type="text" name="display" size="10"/> </td>
</tr>
<tr>
<td> </td>
</tr>
</td>
<td> <input type="button" value="Compute"
title="Click here to compute the area of the rectangle."
onClick="compute1()">
</td>
<td> <input type="button" value="Clear"
title="Click here to clear the text box."
onClick="clear_all()">
</td>
</table>
</font>
</form>
<script language ="javascript">
function compute1()
{
var xwidth, xheight, solve;
xwidth = parseInt(document.rectangle.width.value);
xheight = parseInt(document.rectangle.height.value);
solve = ( xwidth * xheight);
result = solve+ ".";
document.rectangle.display.value = result;
}
function clear_all()
{
document.rectangle.width.value = "";
document.rectangle.height.value = "";
document.rectangle.display.value = "";
document.rectangle.width.focus();
}
</script>
</body>
</html>
