Simple area and perimeter calculator not working

Question

1.00/5 (1 vote)

See more:

Hey all.
Just wondering if someone could tell me what im doing wrong.
New to coding have done a few things like this but it doesn't seem to work :/
Below is the code

What I have tried:

HTML

<!DOCTYPE html>
<html>
	<head>
		<script>	
			var $ = function(id){ //gets information from the text box to rest of script
				return document.getElementById(id);
			} //end of dollar function 
			
			function calculateArea(){ //calculates the area using the users input
				
				var width = document.getElementById("width")".value;
				var length = document.getElementByID("length").value;
				var area = length.value * width.value; //calculation for area
				area = area.toFixed(2); 
				var perimeter = width * 2 + length * 2;
				
				document.getElementById('area').value = area;
				
				document.getElementByID('perimeter').value = perimeter;
			
				
						
			} //end of calculateArea function
			
			function calculatePerimeter (length,width){ //calculates the perimeter using the users inputs
				
				var perimeter = width.value*2 + length.value*2; //calculation for perimeter 
				perimeter = perimeter.toFixed(2);
			
				return perimeter; //outputs the calcultion
			} //end of calculatePerimeter function

						
			function processEntries(){ 
				
				var length = parseFloat($("length").value);
				var width = parseFloat($("width").value);
				
				$("area").value = calculateArea();
				$("perimeter").value = calculatePerimeter();
				alert("test"); 
					
					
			}
			
			} //end of processEnteries
			window.onload = function(){ //waits for the user to click the button then processes
				alert("test1");
				$("calculate").onclick = processEntries; //processes input
				$("length").focus();		//makes it flash waiting for users input			
			
			}// end of button on click command
		
		
		
		</script>	
	</head>
	
	<body>
		<main>	 
			<h1> Area & Perimeter Calculator </h1><br> 
			<label for="intructions">Enter numerical values below and click "Calculate".</label><br>
			<p><label for="length">Length:  </label>
			<input type="text" id="length"><br>
			<label for="width">Width:  </label>
			<input type="text" id="width"><br>
			<label for="area">Area:   </label>
			<input type="text" id="area"><br>
			<label for="perimeter">Perimeter:   </label>
			<input type="text" id="perimeter"><br>
			
			<label> </label> 
			<input type="button" id="calculate" value="Calculate Area and Perimeter">
		
		</br></br></br></br></p></br></br></main>
	</body>
	
</html>

Posted 5-Sep-16 15:09pm

Member 12721687

Updated 5-Sep-16 19:50pm

Richard MacCutchan

v3

Add a Solution

2 solutions

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)

Abhinav S · Accepted Answer · 2016-09-05T16:06:00

Solution 1

var area = length.value * width.value;
Just try area = length *width; instead.

Posted 5-Sep-16 16:06pm

Abhinav S

Comments

Member 12721687 6-Sep-16 17:41pm

Thanks a lot for your help!

Patrice T · Accepted Answer · 2016-09-05T16:50:00

Solution 3

There are many errors in your page, here is just a few.
Start by replacing

JavaScript

var width = document.getElementById("width")".value;

with

JavaScript

var width = document.getElementById("width").value;

and remove a } at the end of processEntries().

Your browser have tools to help you debug your page, with FireFox, itis in Tools > Web Developer >
There, you get a Web Console and debugger

Posted 5-Sep-16 16:50pm

Patrice T

Comments

Member 12721687 6-Sep-16 17:41pm

Thanks so much!

Patrice T 6-Sep-16 17:48pm

You're welcome.