Пифагорейский треугольник калькулятор

Я хотел создать программу, которая может рассчитывать недостающую сторону треугольника, используя теорему Пифагора. Также программа должна нарисовать треугольник для масштабирования либо в виде SVG, либо на холсте (это на самом деле не имеет значения). Он работает для некоторых треугольников (например, 3,4,5), но для других он искажает некоторые длины (главным образом, стороны а). Кто-нибудь знает, как это исправить? Пожалуйста?
Код Pen

//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();
  });
body {
    background-color:#f0f0f0;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
 }
div {
    width:380px;
    padding:20px;
    border:1px solid #999;
    margin:20px auto;
    background-color:#fff;
    box-shadow:10px 10px 20px #666;
    font-size:100;
    text-align:center;
 }
div {
    margin:10px 0;
    float: left;
 }
<body>
<div>
  <h2>Calculating C</h2>
  <input id="a1" type="number" placeholder="side a"/>
  <input id="b1" type="number" placeholder="side b"/>
  <br/>
  <button onclick="findC()">Find C</button>
  <p id="outputC"></p>
  
  <svg width="200" height="200">
    <polygon id="triangleC"/>
  </svg>
  <button id="btn1" onclick="drawSVGC()">Draw</button>
 </div>
 
 <div>
   <h2>Calculating B</h2>
  <input id="c2" type="number" placeholder="side c"/>
  <input id="a2" type="number" placeholder="side a"/>
  <br/>
  <button onclick="findB()">Find B</button>
  <p id="outputB"></p>
   
  <svg width="200" height="200">
    <polygon id="triangleB"/>
  </svg>
  <button id="btn2" onclick="drawSVGB()">Draw</button>
 </div>
  
  <div>
   <h2>Calculating A</h2>
  <input id="c3" type="number" placeholder="side c"/>
  <input id="b3" type="number" placeholder="side b"/>
  <br/>
  <button onclick="findA()">Find A</button>
  <p id="outputA"></p>
    
  <svg width="200" height="200">
    <polygon id="triangleA"/>
  </svg>
  <button id="btn3" onclick="drawSVGA()">Draw</button>
 </div>
</body>

Источник

1 ответ

см. рабочий демо

Прежде чем вычесть один боковой квадрат из другого бокового, вы должны сделать это из большого, в противном случае вы пытаетесь получить квадратный корень из числа минус, которое даст вам NaN потому что минус числа не имеют реальных квадратных корней. Вы можете легко использовать Math.abs чтобы получить положительное значение. и затем выполнить sqrt операция.

рассмотреть это

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

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

как исправить - используйте положительное значение, используя Math.abs вы можете получить положительное значение

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

примечание: вам нужно только редактировать связанные коды,

Источник
Другие вопросы по тегам