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;
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;
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>```

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.12537 seconds
• Memory Usage 2,869KB
• Queries Executed 13 (?)
Template Usage (33):
• (3)bbcode_code
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (4)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (4)postbit
• (4)postbit_onlinestatus
• (4)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (70):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete