1
私はピタゴラスの定理を使って三角形の不足している側を計算することができ、プログラムを作りたかったです。また、プログラムは、svgまたはキャンバスのいずれかにスケールする三角形を描画する必要があります（これは問題ではありません）。 それはいくつかの三角形（3,4,5など）で動作しますが、他のものはいくつかの長さ（主にa面のもの）を台無しにします。誰かがこれを修正する方法を知っていますか？お願いします？
Code 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;
}
\t \t 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;
}
\t \t 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;
}
\t \t 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>