Click here to Skip to main content
15,886,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to make a code where I enter the x-axis, y-axis, and the radius of a circle. Those values are entered into an object, and then displays the area of the circle, and the circumference. This is as far as I have gotten. As the code is right now, I am not getting any output, and I am not completely certain if my objects are correct. My question is, how do I fix this code, in order for me to input the values that I want in the forms, and it outputs the area of a circle and circumference, through an object.

What I have tried:

HTML
<html>
<head>
</head>
<body>
<form id="register">
	<h1>Area and circumference of a circle</h1>
	<fieldset> 
		<legend>Enter Information</legend> 
		<div> 
			<label>Enter the radius of a circle
			<input id="rad" name="rad" type="number" placeholder="Numbers Only" required autofocus> 
			</label>
		</div>
		<div> 
			<label>Enter the x-axis of a circle
			<input id="xAxis" name="xAxis" type="number" placeholder="Numbers Only" required autofocus> 
			</label>
		</div>
		<div> 
			<label>Enter the y-axis of a circle
			<input id="yAxis" name="yAxis" type="number" placeholder="Numbers Only" required autofocus> 
			</label>
		</div>
	</fieldset>
	
	<fieldset> 
		<div> 
			<input id="calculate" name="calculate" type="button" value="Calculate" onClick='Circle();'> 
		</div> 
	</fieldset> 
</form> 
</body>
</html>

<title>Object Circle</title>

CSS
body {
	margin: 2em 5em;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1, legend {
	font-family:Arial, Helvetica, sans-serif;
}
label, input, select {
	display:block;
}
input, select {
	margin-bottom: 1em;
}
fieldset {
	margin-bottom: 2em;
	padding: 1em;
}


JavaScript
function Circle(xAxis, yAxis, rad){
	this.xCord = x;
	this.yCord = y;
	this.radius = r;

	this.area = function(){
		return Math.PI * this.radius * this.radius;
	};

	this.perimeter = function(){
		return 2*Math.PI*this.radius;
	};
}
this.move = function(){
	this.xCord = x;
	this.yCord = y;
}

var c1 = new Circle(3, 4, 5);
	c1.area(0, 0);
	alert ("The area = " + c1.area);
Posted
Updated 2-May-18 19:18pm
v3
Comments
GKP1992 1-May-18 23:49pm    
Please mention precisely, what issue you're facing with it. No one knows what you want your code to do and what it does instead.
Member 13807158 2-May-18 11:11am    
As the code is right now, I am not getting any output, and I am not completely certain if my objects are correct.
F-ES Sitecore 2-May-18 4:49am    
What's the question?
Member 13807158 2-May-18 11:10am    
My question is, how do I fix this code, in order for me to input the values that I want in the forms, and it outputs the area of a circle and circumference, through an object.

1 solution

Try this function instead.
JavaScript
function Circle(){
        //First you need to read the value from the textboxes and store them in a 
        //variable. Your current function does not do that, so it does not what you 
        //enter in the textboxes, you'll never get a good result. Read more about 
        //reading values from at https://www.w3schools.com/jsref/prop_text_value.asp
	var xAxis = parseInt(document.getElementById("xAxis").value);
        var yAxis = parseInt(document.getElementById("yAxis").value);
        var radius = parseInt(document.getElementById("rad").value);
 
	var area = Math.PI * radius * radius;
	

	var perimeter =  2*Math.PI*radius;
	
    //you can use these variables to either display on the page or do something like 
    //this.
    alert("Area: " + area + " and Circumference: " + perimeter );
}
//I don't know what you're trying to do with this function.
this.move = function(){
	this.xCord = x;
	this.yCord = y;
}
//Or with this.
var c1 = new Circle(3, 4, 5);
	c1.area(0, 0);
	alert ("The area = " + c1.area);
 
Share this answer
 
v3
Comments
Member 13807158 3-May-18 12:26pm    
The way that you made it, it does not output the results.
GKP1992 4-May-18 1:28am    
Check now.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900