pythagorean theorem

**pholder** · 07-20-2012 08:32 PM

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">
<head>
<title> Functions </title>
<meta charset="utf-8">
<script>
window.onload = init;

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

**coothead** · 07-21-2012 05:02 AM

Hi there pholder,

Here is a possible solution...

Code:

<!doctype html>
<html lang="en">

<head>

<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;
    padding:20px;
    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=='')) {
   alert('numbers only');
   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';
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

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

coothead

**007Julien** · 07-21-2012 05:05 AM

Use tabs to clear your code... You will better see errors !

Code:

<!doctype html>
<html lang="en">
<head>
<title> Functions </title>
<meta charset="utf-8">
<script>
window.onload = init;
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>
</head>
<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...

**xelawho** · 07-22-2012 12:49 PM

here's a little version with a display

:

Code:

<!doctype html>
<html lang="en">
<head>
<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>
</head>
<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>

Thread: pythagorean theorem

Thread Tools

Display

pythagorean theorem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions