Вычислить область и окружность треугольника со стороны пользователя

Я пытаюсь написать программу, которая вычисляет площадь и окружность треугольника от входа пользователя. (Они должны вводить стороны).

Это все, что у меня есть и почему-то (что я не могу понять достаточно хорошо, чтобы посмотреть), это не работает.

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

Здесь есть несколько мелких ошибок, так что давайте начнем. Во-первых, давайте посмотрим на вход:

 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(); return Math.sqrt(p * (p-side1) * (p-side2) * (p-side3)); }; 

Вот рабочий JSFiddle со всеми исправлениями. Обратите внимание, что я также сделал некоторые другие очистки, например, кешировать узлы DOM. (Вам нужно будет поместить код JavaScript в теги <script> в конце вашего элемента <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

  • Автоматическая вкладка в следующее поле ввода при заполнении 4 символов
  • Проблема с DIV Show / Hide code?
  • Есть способ запустить событие, когда вертикальное переполнение обнаружено в div?
  • Показать div с другого сайта
  • CSS и <input type = 'file'> - Обсуждение
  • Сценарий стартового тега
  • KineticJS - этап масштабирования для просмотра
  • Удалите все пробелы, набрав текстовое поле на веб-странице
  • Проблемы с Document.write
  • Отладка модального диалога (showModalDialog) в IE
  • Какую цель выполняет тег <script> внутри тега <noscript>?
  • Давайте будем гением компьютера.