从用户输入边计算三角形的面积和周长

Calculate triangle area and circumference from user input sides

本文关键字：周长 三角形 用户 输入 计算      更新时间：2023-09-26

我正在尝试编写一个程序，从用户的输入计算三角形的面积和周长。(他们应该输入边)。

这是我所有的，出于某种原因(我不能很好地理解查找)，它不起作用。

<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>标记内，以便它工作。)

相关文章：