Question

我正在尝试编写一个程序，用于根据用户的输入计算三角形的面积和周长。（他们应该输入两侧）。

这就是我所拥有的，并且由于某些原因（我无法理解它能够很好地查找），它不起作用。

<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>

Answer 1

你不能这样做：

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函数

Answer 2

这里有一些小错误，所以让我们开始吧。首先，让我们看一下输入：

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()功能运行良好，因此无需触摸。要从侧面获取三角形区域，我们可以使用您尝试过的Heron's formula。这是使用我们已定义的getPerimeter()函数的工作实现：

this.getArea = function(){
  var p = this.getPerimeter() / 2;
  return Math.sqrt(p * (p - side1) * (p - side2) * (p - side3));
};

这是一个包含所有修复功能的JSFiddle。请注意，我也做了一些其他的清理工作，比如缓存DOM节点。（您需要将<script>标记内的JavaScript代码放在<body>元素的末尾才能生效。）

从用户输入侧计算三角形区域和周长

2 个答案: