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

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.

Simple area and perimeter calculator not working

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Simple area and perimeter calculator not working

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us