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>
<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>
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;
}
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);