javascript area and perimeter calculator

Question

3.00/5 (2 votes)

See more:

I am new to javascript and I am trying to make an area and perimeter calculator that takes input from the user and displays the output in the corresponding text boxes. I've tried everyyything and cannot figure out where Iam going wrong.

here is what I've done...please help!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Area and Perimeter Calculator</title>
<!--<style type="text/css">
        .style1
        {
            height: 23px;
        }
    </style>-->

</head>
<body>
<div>
        <h1><b>Area and Perimeter Calculator</b></h1>
        <p>Enter the values below and click "Calculate"</p>   
        <table class="auto-style2">
        <tr>
            <td align="right">Length:</td>
            <td align="left"> 
                &lt;input id="txtLength" type="text"  /&gt;</td>
        </tr>
        <tr>
            <td align="right">Width:</td>
            <td align="left">
                
                &lt;input id="txtWidth" type="text"  /&gt;</td>
        </tr>
        <tr>
            <td align="right">Perimeter:</td>
            <td align="left">
                &lt;input id="txtPerimeter" type="text" disabled='disabled'/&gt;
                </td>
        </tr>
        <tr>
            <td align="right">Area:</td>
            <td align="left">
                &lt;input id="txtArea" type="text" disabled='disabled' /&gt;</td>
        </tr>
        <tr>
            <td></td>
            <td>
             <!--   <input type="button" id="btnCalculate"  value="Calculate" 
                     önclick='calculateArea()'; value = 'Calculate'  <!-- align="mddle-->" 
         <input type= "button" id='btnCalculate'  önclick= "CalculateArea();" value = "Calculate" />;</td>       
          </tr>    
    </table>

<script type = "text/javascript">
    function CalculateArea() {
        var txtWidth = document.getElementById("txtWidth").value;
        var txtLength = document.getElementById("txtLength").value;
        var txtArea = txtWidth.value * txtLength.value;
        var txtPerimeter = txtWidth * 2 + txtLength * 2;     
      
       txtArea = document.getElementById('txtArea');
       txtPerimeter = document.getElementById('txtPerimeter');
//       
//document.getElementById("txtArea").value = txtArea;
//    }
//    function calculatePerimeter(){
//    txtWidth = document.getElementById("txtWidth").value;
//    txtLength = document.getElementById("txtLength").value;
//    txtPerimeter = txtWidth * 2 + txtLength * 2;

</script>

</div>
</body>
</html>

Posted 18-Sep-12 20:18pm

dale disney

Updated 18-Sep-12 20:31pm

Sandeep Mewara

v2

Add a Solution

Comments

Sandeep Mewara 19-Sep-12 2:34am

You should share what all wrong - be specific.

dale disney 19-Sep-12 2:39am

It takes the user input, but doesnt display anything. On debug it dies at the onclick.

2 solutions

Solution 2

You don't get the result because you never assign a value to the element txtPerimeter. Also, when you try to get an element to be used to output perimeter value, you override the numeric value previously calculated for this variable. As JavaScript is, apparently, a scripting language, which uses loose type system, the same variable first gets the numeric value equal to the perimeter value, but later on, you override this value with the DOM element object representing the control with the id="txtPerimeter".

That should be enough to resolve the problem (if other parts are correct). It should be something like

JavaScript

// calculate numeric values:
elementPerimeter = document.getElementById('txtPerimeter');
elementPerimeter.value =  txtWidth * 2 + txtLength * 2; // using previously calculated txtWidth and txtLength

You should better avoid those confusing prefixes "txt" in variable names. And, at least at first, try not to re-use the variables. If some variable represents the numeric value, use it for numeric values only; assign it first and modify as calculations go, or not. If some variable represents the DOM element, calculate it once (like using getElementById) and, in most simple cases, never modify.

Please see:
http://en.wikipedia.org/wiki/Loose_typing[^],
http://en.wikipedia.org/wiki/JavaScript[^].

It looks like you need to learn a lot of very basic stuff. JavaScript is pretty difficult for understanding and debugging, honestly. You might need to master some very basic general programming techniques on something much more simple (at least when it comes to basics), such as C#.

—SA

Posted 18-Sep-12 20:44pm

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2012-09-18T20:39:00

Here, this is wrong: var txtArea = txtWidth.value * txtLength.value;
You already have values from control, no need to do .value again. OR if you want to then just get the object via getElementById.

Further, while assigning back data, your control should be on left side.

Here:

JavaScript

function CalculateArea() {
        var txtWidth = document.getElementById("txtWidth").value;
        var txtLength = document.getElementById("txtLength").value;
        var txtArea = txtWidth * txtLength;
        var txtPerimeter = txtWidth * 2 + txtLength * 2;

        document.getElementById('txtArea').value = txtArea;
        document.getElementById('txtPerimeter').value = txtPerimeter;
}

OR

JavaScript

function CalculateArea() {
        var txtWidth = document.getElementById("txtWidth");
        var txtLength = document.getElementById("txtLength");
        var txtArea = txtWidth.value * txtLength.value;
        var txtPerimeter = txtWidth.value * 2 + txtLength.value * 2;

        document.getElementById('txtArea').value = txtArea;
        document.getElementById('txtPerimeter').value = txtPerimeter;
}

Both would work.

javascript area and perimeter calculator

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us