Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Basic HTML help


  • Please log in to reply
4 replies to this topic

#1 meowbits


    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 20 April 2009 - 10:26 AM

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.

<title>Assignment 9 GUI</title>
<body bgcolor="#808080" text="#454545" align="center">
<h1 align="center">
<font color="#454545">Calculator</font>
<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

<title>Assignment 9 JavaScript</title>
<body bgcolor="#808080" text="#454545" align="center">
<h1 align="center">
<font color="#454545">JavaScript</font>
<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);



  • 0

#2 Orjan


    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 20 April 2009 - 12:16 PM

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.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.

#3 PythonPower


    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 179 posts

Posted 21 April 2009 - 08:55 AM

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:

<title>Assignment 9 GUI</title>
<h1 style="text-align: center;">
<span style="color: #454545;">Calculator</span>
<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

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...
  • 0

#4 meowbits


    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 21 April 2009 - 09:03 AM

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!
  • 0

#5 hkp


    CC Regular

  • Just Joined
  • PipPipPip
  • 36 posts

Posted 19 May 2009 - 09:31 PM

Try this code..


<!-- 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 -->

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


<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
= <input type=text name=area size=10>

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

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

  • 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download