Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with computing an average

    Hello fellow coders, I have a problem I need some help on. I have to make an average calculator on a website with javascript wherre the average updates when values change in the input boxes.
    Here is my code so far:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    function calcAvg(Box1,Box2,Box3,Box4,Box5 ){
    function preformCalc(Box1,Box2,Box3,Box4,Box5){
    function calcAvg(){
    
    functionCalcAvg(Box1,Box2,Box3,Box4,Box5/5){
    return statement= AvgCalc
    }
    </head>
    <body>
    <form name="Average">
    Box 1<input type="text" name="Box1"  value="0"  onchange=
    "calcAvg(document.totalprice.value,document.calcAvg.Box1.value"><br>
    Box2<input type="text" name="Box2"  value="0" onchange=
    "calcAvg(document.calcAvg.value,documentcal.calcAvg.Box2.value"><br> 
    Box 3<input type="text" name=" Box3"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box3.value"><br>
    Box 4<input type="text" name="Box4"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box4.value"><br>
    Box 5<input type="text" name="Box5"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box5.value"><br><br>
    Result<input type="text" name="Result"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Result.value
    </form>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I hate to say it, but this looks like old code that is being taught by a teacher/professor who isn't up to date with more modern methods.

    You are calling the main function from within itself; this will heterodyne and never end.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So what should I do?

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    @ WolfShade

    We really must be seeing different things. What I see is code that is broken in so many ways, I don't even know where to start.

    It starts with defining a bunch of functions of which neither is correctly closed, neither one is implemented but the last one, which, however, is syntactically wrong and useless.
    And the way the code is "called" isn't correct either, it's missing closing parenthesis.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I also didn't notice until just now that you're not even referencing the form, itself. Try this:
    Give the form an ID and remove the name.
    Code:
    function calcAvg(){
      var df = document.forms["Average"];
      var b1 = Number(df.Box1.value), 
           b2 = Number(df.Box2.value),
           b3 = Number(df.Box3.value), 
           b4 = Number(df.Box4.value),
           b5 = Number(df.Box5.value);
      var total = Number((b1+b2+b3+b4+b5)/5);
          df.Result = total;
    }
    Make the onchange of Box1 - Box5 to "calcAvg();"
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put the code in the head tag right?

    Quote Originally Posted by WolfShade View Post
    Try this:
    Give the form an ID and remove the name.
    Code:
    function calcAvg(){
      var df = document.forms["Average"];
      var b1 = Number(df.Box1.value), 
           b2 = Number(df.Box2.value),
           b3 = Number(df.Box3.value), 
           b4 = Number(df.Box4.value),
           b5 = Number(df.Box5.value);
      var total = Number((b1+b2+b3+b4+b5)/5);
          df.Result = total;
    }
    Make the onchange of Box1 - Box5 to "calcAvg();"

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    @ ITguy94

    Okay, I'll go over (hopefully all) your mistakes:

    1. You didn't put your Javascript in between Javascript tags:

    Code:
    <script type="text/javascript">
    ....
    </script>
    2. You start defining a bunch of functions and open them, but you never close them, you nest them, you never actually calculate anything, and you don't ever call them.

    3. The only function that somewhat actually looks like a function is

    Code:
    functionCalcAvg(Box1,Box2,Box3,Box4,Box5/5){
    return statement= AvgCalc
    }
    However, you're missing an essential(!) space between the function keyword and the function's name. Also, "Box5/5" as a parameter doesn't make any sense (you only give a name to a parameter in it's declaration!). Lastly, the return line doesn't make sense: You assign a variable, that has never been declared, to another variable, that you have never declared, and return that. Oh, and you should always end commands with ';'.

    4. You don't close the function call here:

    Code:
    <input type="text" name="Box1"  value="0"  onchange=
    "calcAvg(document.totalprice.value,document.calcAvg.Box1.value">

    All that being said, time to improve it. First of all, let's start with a skeleton with proper syntax:

    Code:
    <!DOCTYPE html>
    <head>
    </head>
    <body>
    
        <script type="text/language">
        </script>
    </body>
    </html>
    Now, let's put some DOM elements in there. We actually won't really need a form for now. How about this?

    Code:
    <input type="text" class="box" value="0" />
    <input type="text" class="box" value="0" />
    <input type="text" class="box" value="0" />
    <input type="text" class="box" value="0" />
    <input type="text" class="box" value="0" />
    
    <br /><br />
    
    Result: <input type="text" id="result" value="0" readonly=readonly />
    Insert it in the above skeleton in the spot you think it should go! Now we need to add some Javascript. Well, first of all, let's get the boxes:

    Code:
    var boxes = document.getElementsByClassName('box');
    That gives us all elements that have the class "box". Now we assign an onchange event to all of them – and to save us work, we'll use the same function for all of them:

    Code:
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].onchange = updateResult;
    }
    Awesome. Now they all call a function updateResult. But wait – we never declared that function! So let's do that now:

    Code:
    function updateResult() {
        var newAverage = calculateAverage();
        
        if (!isNaN(newAverage)) {
            document.getElementById('result').value = newAverage;
        }
    }
    So what this function does is it calculates the average by calling another function that we yet have to implement, and then outputs that value – but only if it's a valid number.

    So what's missing now is actually calculating the average. That I will leave to you! Implement this function:

    Code:
    function calculateAverage() {
        // this is your job!
    }
    Hint: use the boxes array we defined earlier. You can see above how to use it to loop through each box.
    Last edited by Airblader; 03-20-2013 at 09:11 PM.

  • #8
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by ITguy94 View Post
    I put the code in the head tag right?
    You can; however, the more modern way is to put the <script></script> tags just before the closing </body> tag.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Covering the rare conditions where JavaScript must be attached in the head instead of at the bottom of the body and the rare conditions where a script attached to the bottom of the body needs to use onload are things that ought to be covered in any beginner JavaScript course.

    Basically the only scripts that go in the head are those that need to run before the page loads (such as a framebreaker script that reloads the page outside of someone else's frames). The only scripts properly placed just before the </body> tag that need to use onload are where the script is testing whether all of the files actually loaded successfully.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not allowed to use a for statement or an if or an array.
    She hasn't taught us yet.


    Quote Originally Posted by Airblader View Post
    @ ITguy94

    Code:
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].onchange = updateResult;
    }
    Awesome. Now they all call a function updateResult. But wait – we never declared that function! So let's do that now:

    Code:
    function updateResult() {
        var newAverage = calculateAverage();
        
        if (!isNaN(newAverage)) {
            document.getElementById('result').value = newAverage;
        }
    }
    So what this function does is it calculates the average by calling another function that we yet have to implement, and then outputs that value – but only if it's a valid number.

    So what's missing now is actually calculating the average. That I will leave to you! Implement this function:

    Code:
    function calculateAverage() {
        // this is your job!
    }
    Hint: use the boxes array we defined earlier. You can see above how to use it to loop through each box.

  • #11
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is what I have now:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function calcAvg(Box1,Box2,Box3,Box4,Box5 ){
    function calcAvg(){
      var Avg = document.forms["Average"];
      var b1 = Number(df.Box1.value), 
           b2 = Number(df.Box2.value),
           b3 = Number(df.Box3.value), 
           b4 = Number(df.Box4.value),
           b5 = Number(df.Box5.value);
      var total = Number((b1+b2+b3+b4+b5)/5);
          df.Result = total;
    }
    </script>
    </head>
    <body>
    <form name="Average">
    Box 1<input type="text" name="Box1"  value="0"  onchange=
    "calcAvg(document.totalprice.value,document.calcAvg.Box1.value" )> <br>
    Box2<input type="text" name="Box2"  value="0" onchange=
    "calcAvg(document.calcAvg.value,documentcal.calcAvg.Box2.value" )> <br> 
    Box 3<input type="text" name=" Box3"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box3.value" )> <br>
    Box 4<input type="text" name="Box4"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box4.value" )> <br>
    Box 5<input type="text" name="Box5"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.Box5.value" )> <br><br>
    Total<input type="text" name="total"  value="0" onchange=
    "cal_total(document.calcAvg.value,document.calcAvg.total.value" )
    </form>
    </body>
    </html>

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You don't need Number() around the last statement as all of the values in that statement already are numbers. You only need it for the first block of statements because the values received from the form fields are all strings and need to be converted to numbers before they can be added together.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Get rid of the code in red:

    <script type="text/javascript">
    function calcAvg(Box1,Box2,Box3,Box4,Box5 ){
    function calcAvg(){
    var Avg = document.forms["Average"];
    var b1 = Number(df.Box1.value),
    b2 = Number(df.Box2.value),
    b3 = Number(df.Box3.value),
    b4 = Number(df.Box4.value),
    b5 = Number(df.Box5.value);
    var total = Number((b1+b2+b3+b4+b5)/5);
    df.Result = total;
    }
    </script>

    For the inputs, the only thing you need for the onchange is:

    onchange="calcAvg()"
    Last edited by WolfShade; 03-20-2013 at 10:36 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #14
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still can't get it to work.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    You do this:
    Code:
    var Avg = document.forms["Average"];
    to get a reference to the <form>

    But then you do this:
    Code:
    var b1 = Number(df.Box1.value),
    Where, pray tell, does df come from???

    And then you also do
    Code:
    df.Result = total;
    which makes no sense whatsoever. Where did Result come from?
    Last edited by Old Pedant; 03-21-2013 at 01:04 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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