www.webdeveloper.com
Results 1 to 9 of 9

Thread: Writing a JavaScript program for the Pythagorean theorem

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    4

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

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

    Thanks for your help!

  2. #2
    Join Date
    Dec 2013
    Posts
    21
    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.

  3. #3
    Join Date
    Dec 2013
    Posts
    201
    Quote Originally Posted by landar View Post
    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.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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

  5. #5
    Join Date
    Dec 2013
    Posts
    21
    yeah, that'll do it. Go with that.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Dec 2013
    Posts
    21
    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?

  8. #8
    Join Date
    Mar 2012
    Posts
    202
    Quote Originally Posted by landar View Post
    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.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301
    Quote Originally Posted by landar View Post
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

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
  •  
HTML5 Development Center



Recent Articles