Area, Perimeter buttons, please help me! [Archive]

crazyeyez51

08-18-2007, 09:31 PM

I need help with a program Im trying to write. This program is a area and perimeter program, you enter in the length of a side on a square and you click the area button and gives you the area and the perimeter button gives you the perimeter. I have this so far, I cant even get the area button to work and dont know what to do with the perimeter button

<html>
<head>
<title>Area & Perimeter</title>
<script language="JavaScript">
function area//parameter
{
alert("The 'area' of your square is" + area1 );
} //end outputFunction

var length = parseInt(prompt("Type the Length of your square:","10"));
var area1 = length * length;
area; //call to function from prompt

</script>
</head>
<body>
<form>
<input type = "button"
onClick = "area;"
value = "Area"> 
</form>
</body>
</html>

coothead

08-18-2007, 10:33 PM

Hi there crazyeyez51,

have a look at this example, it may help...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Area & Perimeter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#container {
width:210px;
padding:10px;
border:3px double #999;
margin:30px auto;
}

#container:after {
content:'';
display:block;
clear:both;
}
.lab {
width:100px;
float:left;
margin:10px 2px 0 2px;
}
.inp {
width:90px;
float:left;
margin:10px 2px 0 2px;
}
</style>

<script type="text/javascript">
var df;
window.onload=function() {
df=document.forms[0];
df[4].onclick=function() {
areaPerimeter();
}
}
function areaPerimeter() {
side=df[1].value;
df[2].value=side*side;
df[3].value=side*4;
}
</script>

</head>
<body>

<form action="#">
<fieldset id="container">
<legend>area and perimeter</legend>
<label class="lab">side : </label><input class="inp" type="text"/>
<label class="lab">area : </label><input class="inp" type="text" readonly="readonly"/>
<label class="lab">perimeter : </label><input class="inp" type="text" readonly="readonly"/>
<input class="inp" type="button" value="calculate"/>
<input class="inp" type="reset" value="reset"/>
</fieldset>
</form>

</body>
</html>
coothead