我正在尝试编写一个程序,从用户的输入计算三角形的面积和周长。(他们应该输入边)。
这是我所有的,出于某种原因(我不能很好地理解查找),它不起作用。
<html>
<head>
<title>Triangle's Area & Perimeter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function Triangle(side1,side2,side3){
this.side1 = side1;
this.side2 = side2;
this.side3 = side3;
this.getArea = function(){
return s = (this.side1 + this.side2 + this.side3)/2;
area = squareRoot(s * (s-side1) * (s-side2) * (s-side3));
};
this.getPerimeter = function(){
return side1 + side2 + side3;
};
this.toString = function(){
return "The Triangle with sides = " + this.side1 + this.side2 + this.side3 + " has Area = " + this.getArea() + " and Perimeter = " + this.getPerimeter();
};
}
function calculate(){
var s = parseFloat(document.getElementById('side1','side2','side3').value);
if(isNaN(s)){
document.getElementById('data').innerHTML = "Please enter numbers only";
return;
}
if(s<=0){
document.getElementById('data').innerHTML = "Negative numbers and Zero don't make sense";
return;
}
var myTriangle = new Triangle();
document.getElementById('data').innerHTML = myTriangle.toString();
}
</script>
</head>
<body>
<h3>Program Calculates Area and Perimeter of Triangles</h3>
<p>Enter the side1: <input type="text" id="side1" value="" />
<p>Enter the side2: <input type="text" id="side2" value="" />
<p>Enter the side3: <input type="text" id="side3" value="" />
<input type="button" value="Calculate" onClick="calculate()" /></p>
<p id="data"></p>
</body>
你不能这么做:
document.getElementById('side1','side2','side3');
你需要单独的变量:
var s1 = parseFloat(document.getElementById('side1').value);
var s2 = parseFloat(document.getElementById('side2').value);
var s3 = parseFloat(document.getElementById('side3').value);
然后将这些变量作为参数传递给Triangle函数
这里有几个小错误,所以让我们开始吧。首先,让我们看一下输入:
var s = parseFloat(document.getElementById('side1','side2','side3').value);
我们需要知道所有计算中的三个不同的边,所以让我们分别检索输入:
var s1 = parseFloat(document.getElementById('side1')
, s2 = parseFloat(document.getElementById('side2')
, s3 = parseFloat(document.getElementById('side3');
接下来我们需要对所有三个数字运行验证,将以下条件更改为:
if(isNaN(s1) || isNaN(s2) || isNaN(s3))
…和…
if(s1<=0 || s2<=0 || s3<=0)
最后,我们需要将所有的值传递给Triangle
构造函数:
var myTriangle = new Triangle(s1, s2, s3);
接下来,让我们看看我们的Triangle
对象。getPerimeter()
功能工作良好,所以不需要触摸它。要从三角形的边长算出三角形的面积,我们可以用赫伦公式,你已经试过了。下面是使用我们已经定义的getPerimeter()
函数的工作实现:
this.getArea = function(){
var p = this.getPerimeter() / 2;
return Math.sqrt(p * (p - side1) * (p - side2) * (p - side3));
};
这是一个包含所有修复的工作JSFiddle。注意,我还做了一些其他清理工作,比如缓存DOM节点。(您需要将JavaScript代码放在<body>
元素末尾的<script>
标记内,以便它工作。)