Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Area, Perimeter buttons, please help me!

    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"> <!-- call to function from button//-->
    </form>
    </body>
    </html>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,721
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there crazyeyez51,

    have a look at this example, it may help...
    Code:
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •