毕达哥拉斯三角计算器

时间:2017-10-15 11:40:54

标签: javascript html css pythagorean

我想制作一个可以用毕达哥拉斯定理计算三角形缺失面的程序。此外,程序应绘制三角形以缩放为svg或画布(这并不重要)。 它适用于某些三角形(如3,4,5),但其他三角形则会混淆一些长度(主要是a侧)。有人知道如何解决这个问题吗?请?
Code Pen

section-content
section content
//Following three functions only post the side lengths
function findC(){
  var a = document.getElementById("a1").value;
  var b = document.getElementById("b1").value;
  var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
  document.getElementById("outputC").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}

function findB(){
  var a = document.getElementById("a2").value;
  var c = document.getElementById("c2").value;
  var b = Math.sqrt(Math.pow(c, 2) -  Math.pow(a, 2));
  document.getElementById("outputB").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}
function findA(){
  var b = document.getElementById("b3").value;
  var c = document.getElementById("c3").value;
  var a = Math.sqrt(Math.pow(c, 2) -  Math.pow(b, 2));
  document.getElementById("outputA").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
}

//Following three functions draw the triangles
function drawSVGC() {
    var a = document.getElementById("a1").value;
    var b = document.getElementById("b1").value;
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); //Calculates sideC
   //To make the drawings larger so that they are visible
    if(a<20){
       a = a*10;
    }
    if(b<20){
      b = b*10;
    }
    if(c<20){
      c = c*10;
    }   
		var x3 = a;
    var y3 = b;
    var ox = 45 - (a / 2);
    var oy = 45 + (y3 / 2);
    var points = [
        [ox, oy].join(','),
        [a + ox, oy].join(','),
        [ox + x3, oy - y3].join(',')
        ].join(' ');
    document.getElementById('triangleC').setAttribute('points', points);
}

var myBtn1 = document.getElementById('btn1');
myBtn1.addEventListener('click', function(event) {
    drawSVGC();
  });

function drawSVGB() {
    var a = document.getElementById("a2").value;
    var c = document.getElementById("c2").value;
    var b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2)); //Calculates sideB  
    //To make the drawings larger so that they are visible
    if(a<20){
       a = a*10;
    }
    if(b<20){
      b = b*10;
    }
    if(c<20){
      c = c*10;
    }   
		var x3 = a;
    var y3 = b;
    var ox = 45 - (a / 2);
    var oy = 45 + (y3 / 2);
    var points = [
        [ox, oy].join(','),
        [a + ox, oy].join(','),
        [ox + x3, oy - y3].join(',')
        ].join(' ');
    document.getElementById('triangleB').setAttribute('points', points);
}

var myBtn2 = document.getElementById('btn2');
myBtn2.addEventListener('click', function(event) {
    drawSVGB();
  });

function drawSVGA() {
    var b = document.getElementById("b3").value;
    var c = document.getElementById("c3").value;
    var a = Math.sqrt(Math.pow(c, 2) - Math.pow(b, 2));//Calculates sideA
    //To make the drawings larger so that they are visible
    if(a<20){
       a = a*10;
    }
    if(b<20){
      b = b*10;
    }
    if(c<20){
      c = c*10;
    }   
		var x3 = a;
    var y3 = b;
    var ox = 45 - (a / 2);
    var oy = 45 + (y3 / 2);
    var points = [
        [ox, oy].join(','),
        [a + ox, oy].join(','),
        [ox + x3, oy - y3].join(',')
        ].join(' ');
    document.getElementById('triangleA').setAttribute('points', points);
}

var myBtn3 = document.getElementById('btn3');
myBtn3.addEventListener('click', function(event) {
    drawSVGA();
  });

1 个答案:

答案 0 :(得分:1)

see working demo

在从另一个方块中减去一个正方形之前,你应该从大的方块中减去它,否则你试图得到一个减号的平方根,它会给你NaN,因为减去的数字不具备真正的平方根。您可以轻松使用Math.abs获得正值。然后执行sqrt操作。

考虑这一个

 var b = Math.sqrt(Math.pow(c, 2) -  Math.pow(a, 2));

如果a大于c

,请看你正试图获得减值的根

如何修复 - 使用正值,使用Math.abs可以得到正值

var b = Math.sqrt(Math.abs(Math.pow(c, 2) -  Math.pow(a, 2))));

注意:您只需编辑相关代码,