# Thread: pythagorean theorem

1. Registered User
Join Date
Jul 2012
Posts
28

## pythagorean theorem

I'm trying to create code to give me the result of the pythagorean theorem. I want to know if I'm going in the right direction so far. Any input is appreciated.

This is my code along with some comments regarding what I want to do:

<!doctype html>
<html lang="en">
<title> Functions </title>
<meta charset="utf-8">
<script>

function init() {
var button = document.getElementById("submit");
button.onclick = pythagoras;
}

// Computes the length of side c of a triangle, given
// the lengths of side a and b, using the Pythagorean Theorem
function pythagoras() {
// your code here to get the values of sides and b
// remember to convert a and b to numbers (using parseFloat)

function solvepy(form) {
var a = parseFloat(form.a.value);
var b = parseFloat(form.b.value);
form.c.value = Math.sqrt(a*a + b*b);
}

function pythagoras(form) {
var aInput = document.getElementById("a");
var bInput = document.getElementById("b");
}

var result = displayResult();

}

// your code here to compute the value of side c

// your code here to call the function displayResult

}

function displayResult(a, b, c) {
var div = document.getElementById("result");
div.innerHTML = "Triangle: a = " + a + ", b = " + b + ", c = " + c;
}

displayResult();
</script>
<body>
<form>
<label for="a">Enter lengths for sides a: </label>
<input type="number" id="a" size="3">
<label for="b"> and b: </label>
<input type="number" id="b" size="3"> <br>
<input type="button" id="submit" value="Compute c!">
</form>
<div id="result">
</div>
</body>
</html>

2. Hi there pholder,

Here is a possible solution...
Code:
```<!doctype html>
<html lang="en">

<meta charset="utf-8">

<title> Functions </title>

<style>
body {
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
}
form {
width:380px;
border:1px solid #999;
margin:20px auto;
background-color:#fff;
box-shadow:10px 10px 20px #666;
font-size:100&#37;;
text-align:center;
}
form div {
margin:10px 0;
}
#result {
width:420px;
line-height:30px;
border:1px solid #999;
margin:auto;
background-color:#fff;
box-shadow:10px 10px 20px #666;
text-align:center;
font-size:90%;
}
.hide {
display:none;
}
</style>

<script>

function init() {

df=document.forms[0];
obj=document.getElementById('result');
df.reset();

df[2].onclick=function() {
a=parseFloat(df[0].value);
b=parseFloat(df[1].value);

if((isNaN(df[0].value))||(df[0].value=='')||
(isNaN(df[1].value))||(df[1].value=='')) {
df.reset();
return;
}

c=Math.sqrt(a*a+b*b);
obj.innerHTML='Triangle: a='+a+',  b='+b+',  c='+c;
obj.className='';
}

df[3].onclick=function() {
obj.className='hide';
}
}
</script>

<body>

<form action="#">
<div>
<label for="a">Enter lengths for sides a: </label>
<input type="text" id="a" size="3">
<label for="b"> and b: </label>
<input type="text" id="b" size="3">
</div><div>
<input type="button" value="Compute c">
<input type="reset" value="Clear">
</div>
</form>

<div id="result" class="hide"></div>

</body>
</html>
```

3. Registered User
Join Date
Oct 2010
Location
Versailles, France
Posts
1,290
Use tabs to clear your code... You will better see errors !
Code:
```<!doctype html>
<html lang="en">
<title> Functions </title>
<meta charset="utf-8">
<script>
function init() {
var button = document.getElementById("submit");
button.onclick = pythagoras;
}
// Computes the length of side c of a triangle, given
// the lengths of side a and b, using the Pythagorean Theorem
function pythagoras() {
// your code here to get the values of sides and b
// remember to convert a and b to numbers (using parseFloat)
function solvepy(form) {
var a = parseFloat(form.a.value);
var b = parseFloat(form.b.value);
form.c.value = Math.sqrt(a*a + b*b);
}
function pythagoras(form) {
var aInput = document.getElementById("a");
var bInput = document.getElementById("b");
}
var result = displayResult();
}
// your code here to compute the value of side c
// your code here to call the function displayResult
} // to delete
function displayResult(a, b, c) {
var div = document.getElementById("result");
div.innerHTML = "Triangle: a = " + a + ", b = " + b + ", c = " + c;
}
displayResult(); // to delete, it is to early to call this function, the document does not exist !
</script>
<body>
<form>
<label for="a">Enter lengths for sides a: </label>
<input type="text" id="a" size="3">
<label for="b"> and b: </label>
<input type="text" id="b" size="3"> <br>
<input type="button" id="submit" value="Compute c!">
</form>
<div id="result">
</div>
</body>
</html>```
I replace the input type number with type text which are more usual and cross browsers...
Last edited by 007Julien; 07-21-2012 at 05:13 AM.

4. Registered User
Join Date
Nov 2010
Posts
1,276
here's a little version with a display :

Code:
```<!doctype html>
<html lang="en">
<style type="text/css">
#tri {
width:0px;
height:0px;
border-left:50px solid transparent;
border-bottom:50px solid red; /* bottom, add background color here */
}
</style>
<body>
height:<input id="height" type="text" value="50"/>
width: <input id="width" type="text" value="50"/>
hyp: <input id="hyp" type="text"/>
<input type="button" value="calculate" onclick="calcTri()"/>
<div id="tri"></div>
<script type="text/javascript">
function calcTri(){
var thetri=document.getElementById("tri");
var ht=document.getElementById("height").value;
var wd=document.getElementById("width").value;
document.getElementById("hyp").value=Math.sqrt((ht*ht)+(wd*wd))
thetri.style.borderBottom=ht+"px solid red"
thetri.style.borderLeft=wd+"px solid transparent"
}
</script>
</body>
</html>```