Basic HTML help

#1
meowbits

Posted 20 April 2009 - 10:26 AM

Newbie

Members
2 posts

I need to make an html document that calculates the area of a square, circle, triangle or trapazoid. I've never used JavaScript in an html document before so i'm not positive how it works. Our book is complete junk for this, don't even have an example.

I was trying to use radio buttons for the user to pick which object, rectange triange ect, then get prompted to enter length and width, and have it display the area.

Mind helping me out a bit? I would appreciate it.

[SIZE="1"]<html>

    <head>

        <title>Assignment 9 GUI</title>

    </head>

    <body bgcolor="#808080" text="#454545" align="center">

        <h1 align="center">

            <font color="#454545">Calculator</font>

        </h1>

	<hr width=50% />

	<h4 align="center">

 	     <input type="radio" name="rectangle" onClick=" rectangleOrSquare " />Rectangle

   	     <input type="radio" name="circle" onClick=" circle " />Circle

   	     <input type="radio" name="triangle" onClick=" triangle " />Triangle

 	     <input type="radio" name="trapazoid" onClick=" trapazoid " />Trapazoid

	</h4>

    </body>

</html>[/SIZE]

[SIZE="1"]<html>

    <head>

        <title>Assignment 9 JavaScript</title>

    </head>

    <body bgcolor="#808080" text="#454545" align="center">

        <h1 align="center">

            <font color="#454545">JavaScript</font>

        </h1>

	<hr width=50% />

	<script language = "JavaScript"


		// Object type. ex. circle, trapazoid, ect

		var object = rectangleOrSquare;




		// Rectangle or Square

		var length = void;

		var width = void;


		// Circle

		var pi = 3.14159265;

		var radius = 4;


		// Triangle

		var base1 = void;

		var height1 = void;


		// Trapazoid

		var height2 = void;

		var base2 = void;

		



		// Calculations

		var rectangleOrSquare = length * width;

		var circle = pi(radius*radius);

		var triangle = base1 * height1 * .5;

		var trapazoid = height2((base2+1)/2);


		alert(circle);

		


	</script>

    </body>

</html>[/SIZE]

#2
Orjan

Posted 20 April 2009 - 12:16 PM

Writes binary right handed and hex left handed

Moderators
3,299 posts

easiest is to add a form for each calculus, where you assign an onchange that outputs the answer in a textbox beside the one you let people fill in the needed measurements.

__________________________________________
I study Information Systems at Karlstad University when I'm not on CodeCall

#3
PythonPower

Posted 21 April 2009 - 08:55 AM

Programming Professional

Members
230 posts

Firstly, the HTML code you were using there is somewhat depreciated now. Style attributes on tags are best defined using CSS in a style attribute. I've changed your code slightly to show this:

<html>

    <head>

        <title>Assignment 9 GUI</title>

    </head>

    <body>

        <h1 style="text-align: center;">

            <span style="color: #454545;">Calculator</span>

        </h1>

	<hr style="width: 50%;" />

	<h4 style="text-align: center;">

 	     <input type="radio" name="rectangle" onclick=" rectangleOrSquare " />Rectangle

   	     <input type="radio" name="circle" onclick=" circle " />Circle

   	     <input type="radio" name="triangle" onclick=" triangle " />Triangle

 	     <input type="radio" name="trapazoid" onclick=" trapazoid " />Trapazoid

	</h4>

    </body>

</html>

Also bear in mind that <script language="javascript" ... is depreciated. Use <script type="text/javascript" ... instead.

With all that said, I would agree with orjan. Make a form for each shape with the relevant fields. For each form make the onchange value call a function like updateCircle().

Once you've set that up, have the functions read the property values off and do the appropriate calculations...

#4
meowbits

Posted 21 April 2009 - 09:03 AM

Newbie

Members
2 posts

Thanks for the replies, I understand it a lot better now. Kind of disappointed that the few examples we're shown are using older style code... Thanks again!

#5
hkp

Posted 19 May 2009 - 09:31 PM

Learning Programmer

Members
37 posts

Try this code..


<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function doArea(num) {
switch(num) {
case 0 : return (""); break;
case 1 : var length = prompt("Please enter the length of your square:", "");
         length = length * length;
         return (length); break;
case 2 : var width = prompt("Please enter the width of the base:", "");
         var height = prompt("Please enter the height of the triangle:", "");
         return (width * height / 2); break;
case 3 : var width = prompt("Please enter the width of your rectangle:", "");
         var height = prompt("Please enter the height of your rectangle:", "");
         return (width * height); break;
case 4 : var radius = prompt("Please enter the radius of the circle: ", "");
         return (Math.PI * Math.pow(radius, 2)); break;
case 5 : var radius = prompt("Please enter the radious of the sphere:", 0);
         return (4 * Math.PI * (Math.pow(radius, 2))); break;
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<center>
<form name=calcarea>
Find the area of a 
<select name="shape" size="1" onChange="this.form.area.value = doArea(this.selectedIndex);">
<option> ...
<option value="square">Square
<option value="triangle">Triangle
<option value="rectangle">Rectangle
<option value="circle">Circle
<option value="sphere">Sphere
</select>
= <input type=text name=area size=10>
</form>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="#">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  2.01 KB -->