# Writing a JavaScript program for the Pythagorean theorem

• 01-22-2014, 09:38 PM
YongShi
Writing a JavaScript program for the Pythagorean theorem
Hi all, I'm a beginner working on a script for the Pythagorean theorem using JavaScript. This assignment requires me to create a functional code that when the button "Compute C!" is clicked, it will display the values of the Triangle within the HTML.

Two things I'm struggling with at the moment:

1. Getting the code to even display on the page (when I click it, somehow nothing happens)
2. Passing a, b, c to displayResult() when the function is called (still a bit confused about the concept of transferring values from arguments to parameters)

I have this script so far:

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

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

function pythagoras(a, b, c) {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = Math.sqrt(a*a + b*b);
return a, b, c;
}

function displayResult(a, b, c) {
var div = document.getElementById("result");
div.innerHTML = "Triangle: a = " + a + ", b = " + b + ", c = " + c;
}
</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>

• 01-22-2014, 10:20 PM
landar
Wow. You have SO much stuff that is just plain wrong, I am not sure where to start. You are a student, right? Ok, most people frown on helping someone do their assignment but we are willing to help with concepts. But it will take considerable effort on your part to learn.

You have done what so very many beginners do. They code up the entire assignment and them turn the crank. When nothing works, they are perplexed. I cannot emphasize this enough....you must take very small incremental coding steps and verify that those small steps work properly. A strange thing will happen when you do. You will find yourself learning a lot and you will have success. And finally your program will grow until it is done and works properly.

You can start by reviewing functions. You do not understand how to pass or return values. You can pass more than one variable to a function but only return one.

For instance, you probably want your function to return "c" but you have it showing all three! You do not need to pass "c" into the function because you are calculating it. And then you are not properly passing in the parameters in your call to pythagoras.

And that is just the tip of the list of issues. Start with a clean sheet and take it one little step at a time. Read lots of tutorials. I like W3Schools.
• 01-23-2014, 03:29 AM
007Julien
You have so much stuff...???

Replace the return a,b,c; of the function pythagoras by a call to the function displayResult(a, b, c) and test your page with a console.

This is a very good start ! Let the world say what it will... Good luck
• 01-23-2014, 08:49 AM
landar
yeah, that'll do it. Go with that.
• 01-24-2014, 09:57 AM
\\.\
if you had to return from the function a number of elements, you can do it by two / three methods.

first off you don't need (a, b, c) in the function call as you are getting the data via the document.getElelmentById() method.

1. Using an array

function pythagoras() {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = Math.sqrt(a*a + b*b);

return [a, b, c];
}

2. by using an object

function pythagoras() {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = Math.sqrt(a*a + b*b);

return {a, b, c};
}

3. using an object with property names

function pythagoras() {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = Math.sqrt(a*a + b*b);

return {"a":a,"b": b,"c":c};
}

with option 1 & 2, you access the content like x[0] where x is the variable you returned to

with option 3, you access x.a, x.b via the properties you named

the other method suggested of passing the data straight to the output routine is the best option for this program, it is however useful to note that other return methods exist, it means you can pass by reference a vaiable that is an array or object.

final note on arrays, you can have an associative array element like x['cheese'] and elements numbered as normal, the content of the array is accessible as normal in the array except the associative data unless you are referring to it by name directly or using a for...in loop.
• 01-24-2014, 07:11 PM
landar
So, \\.\, JS gives the 'appearance' of returning multiple values when, in effect, it is returning a single pointer (or reference) to an array or object which is then accessed by the calling routine?
• 01-24-2014, 09:02 PM
Gray1989
Quote:

Originally Posted by landar
So, \\.\, JS gives the 'appearance' of returning multiple values when, in effect, it is returning a single pointer (or reference) to an array or object which is then accessed by the calling routine?

Not just JavaScript, but I'm pretty sure every high-level programming language does. There are certain differences and limitations in non-object oriented languages though.
• 01-27-2014, 10:30 AM
\\.\
Quote:

Originally Posted by landar
So, \\.\, JS gives the 'appearance' of returning multiple values when, in effect, it is returning a single pointer (or reference) to an array or object which is then accessed by the calling routine?

You can pass a single object or array and also return a single object or array and in either case they can have multiple properties.

Take a web form, it has many elements but the object can be passed via the this object like so...

HTML Code:

```<form name="thisform" id="theform" action="javascript:;" onsubmit="return validate(this);"> <input name="aninput" type="text" value=""> <input name="aninput" type="text" value=""> <input name="aninput" type="text" value=""> <input name="submit" type="submit" value="Submit"> </form>```
the function called when the form is submitted is passed the form as an object.

so in the
Code:

``` function validate(o){     alert(o.aninput[0].value.length>0); return o.aninput[0].value.length>0; }```
When the form is submitted you will see an alert that says false and the form won't submit.

In that example you passed an object of many elements and returned a single value which was a boolean value.
• 01-27-2014, 10:09 PM
boysingh
Quote:

Originally Posted by landar
Wow. You have SO much stuff that is just plain wrong, I am not sure where to start. You are a student, right? Ok, most people frown on helping someone do their assignment but we are willing to help with concepts. But it will take considerable effort on your part to learn.

You have done what so very many beginners do. They code up the entire assignment and them turn the crank. When nothing works, they are perplexed. I cannot emphasize this enough....you must take very small incremental coding steps and verify that those small steps work properly. A strange thing will happen when you do. You will find yourself learning a lot and you will have success. And finally your program will grow until it is done and works properly.

You can start by reviewing functions. You do not understand how to pass or return values. You can pass more than one variable to a function but only return one.

For instance, you probably want your function to return "c" but you have it showing all three! You do not need to pass "c" into the function because you are calculating it. And then you are not properly passing in the parameters in your call to pythagoras.

And that is just the tip of the list of issues. Start with a clean sheet and take it one little step at a time. Read lots of tutorials. I like W3Schools.

You rather teach in a good way, you are acting like a Pro and said so many things but you didn't even managed to correct what is wrong with his problem..Come on..Being wrong is a stepping stone to learning.

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.37573 seconds
• Memory Usage 2,393KB
• Queries Executed 11 (?)
Template Usage (22):
• (1)bbcode_code_printable
• (1)bbcode_html_printable
• (3)bbcode_quote_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./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/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• 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
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates