从用户输入获取圆的面积和圆周 [英] Get the area and circumference of a circle from user input
本文介绍了从用户输入获取圆的面积和圆周的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个代码，我输入x轴，y轴和圆的半径。将这些值输入到对象中，然后显示圆的面积和圆周。这是我所得到的。由于代码现在，我没有得到任何输出，我不完全确定我的对象是否正确。我的问题是，如何修复此代码，以便我在表单中输入我想要的值，并通过对象输出圆和圆周的区域。
我尝试了什么：
< html >
< head >
< / head >
< body >
< form id = register >
< h1 > 圈子的面积和周长< / h1 >
< fieldset >
< 图例 > 输入信息< / legend >
< div >
< 标签 > 输入半径一圈
< 输入 id = rad < span class =code-attribute> name = rad type = 数字 占位符 = 仅限数字 必需 autofocus >
< / label >
< / div >
< div >
< label > 输入圆圈的x轴
< 输入 id = xAxis name = xAxis type = number 占位符 = 仅限数字 必需 自动对焦 >
< span class =code-keyword>< / label >
< / div >
< div >
< label > 输入圆的y轴
< input id = yAxis name = yAxis type = number 占位符 = 仅限数字 必需 自动对焦 >
< / label >
< / div >
< / fieldset >
< fieldset >
< div >
< 输入 id = 计算 名称 = calculate type = 按钮 value = 计算 onClick =' Circle（）; ' >
< / div >
< / fieldset >
< / form >
< / body >
< < span class = code-leadattribute> / html >
< title > 对象圈< / title >
body {
margin ： 2em 5em;
font-family ： Georgia，Times New Roman，Times，serif;
}
h1 ，图例 {
font-family ： Arial，Helvetica，sans-serif;
}
label ， input ， select {
显示 ： block;
}
输入，选择 {
margin-bottom ： 1em;
}
fieldset {
margin-bottom ： 2em;
padding ： 1em;
}
function Circle（xAxis，yAxis，rad）{
this .xCord = x;
此 .yCord = y;
此 .radius = r;
此 .area = 功能（）{
return Math .PI * this .radius * < span class =code-keyword> this .radius;
};
此 .perimeter = function （）{
return 2 * Math.PI * this.radius;
};
}
此 .move = 功能（）{
< span class =code-keyword> this .xCord = x;
此 .yCord = y;
}
var c1 = new Circle（ 3 ， 4 ， 5 ）;
c1.area（ 0 ， 0 ）;
alert（ area = + c1.area）;
解决方案
尝试使用此功能。
函数 Circle（）{
// 首先，你需要读取文本框中的值和将它们存储在
// 变量中。您当前的功能不会这样做，因此它不是您
// 输入文本框，你永远不会得到一个好结果。阅读更多关于
// 从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 = 数学 .PI * radius * radius;
var perimeter = 2 * Math.PI * radius;
// 您可以使用这些变量在页面上显示或执行类似
// this。
alert（ 区域： + area + 和Circumference： + perimeter）;
}
// 我不知道你要用这个函数做什么。
此 .move = 功能（）{
< span class =code-keyword> this .xCord = x;
此 .yCord = y;
}
// 或者用这个。
var c1 = new 圈（ 3 ， 4 ， 5 ）;
c1.area（ 0 ， 0 ）;
alert（ area = + c1.area）;
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); 解决方案
Try this function instead.
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);
这篇关于从用户输入获取圆的面积和圆周的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
