1

我想制作一个可以使用毕达哥拉斯定理计算三角形缺失边的程序。此外，程序应该绘制三角形以缩放为 svg 或画布（这并不重要）。它适用于一些三角形（如 3、4、5），但其他一些则弄乱了一些长度（主要是 a 边的长度）。有人知道如何解决这个问题吗？请？
代码笔

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

4

1 回答 1

1

看工作演示

在你从另一边平方减去一个边平方之前，你应该从大的平方中减去，否则你试图得到一个负数的平方根，这会给你， 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))));

注意：您只需要编辑 - 相关代码，

于 2017-10-15T11:50:44.000 回答