1
Ich wollte ein Programm erstellen, das die fehlende Seite eines Dreiecks mit Pythagoras Theorem berechnen kann. Auch sollte das Programm das Dreieck zeichnen, um entweder als Svg oder auf einer Leinwand zu skalieren (Es ist nicht wirklich wichtig). Es funktioniert für einige Dreiecke (wie 3,4,5), aber andere vermasselt einige Längen (hauptsächlich das von Seite a). Weiß jemand, wie man das repariert? Bitte?
Code PenPythagorean Triangle Calculator
//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>