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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Complex Javascript Array - sum values and insert value into form

    Trying to adapt a rather complex array code. Basically, I want to add the total hours entered, then return the value into input name="total_hrs", but got stuck! Would also appreciate any help to simplify/clean up the script! Thanks. Here's the script:
    <script language="JavaScript" type="text/javascript">
    <!--
    function subCalc(the_form)
    {
    var subtotal = 0;
    var subtemp = 0;
    var totalHrs = 0;

    // put the calories and form fields into parallel arrays.
    var calorie_array = new Array()
    calorie_array[0] = 72;
    calorie_array[1] = 86;
    calorie_array[2] = 100;
    calorie_array[3] = 126;
    calorie_array[4] = 130;
    calorie_array[5] = 180;
    calorie_array[6] = 156;
    calorie_array[7] = 182;
    calorie_array[8] = 210;
    calorie_array[9] = 250;
    calorie_array[10] = 270;
    calorie_array[11] = 390;
    calorie_array[12] = 390;
    calorie_array[13] = 546;

    var time_array = new Array()
    time_array[0] = the_form.sleeping_time;
    time_array[1] = the_form.TV_time;
    time_array[2] = the_form.sit_time;
    time_array[3] = the_form.cook_time;
    time_array[4] = the_form.stand_time;
    time_array[5] = the_form.wash_time;
    time_array[6] = the_form.walk_S_time;
    time_array[7] = the_form.house_time;
    time_array[8] = the_form.walk_M_time;
    time_array[9] = the_form.gard_time;
    time_array[10] = the_form.danc_time;
    time_array[11] = the_form.stairs_time;
    time_array[12] = the_form.jog_time;
    time_array[13] = the_form.sqsh_time;

    var sub_array = new Array()
    sub_array[0] = the_form.cal0;
    sub_array[1] = the_form.cal1;
    sub_array[2] = the_form.cal2;
    sub_array[3] = the_form.cal3;
    sub_array[4] = the_form.cal4;
    sub_array[5] = the_form.cal5;
    sub_array[6] = the_form.cal6;
    sub_array[7] = the_form.cal7;
    sub_array[8] = the_form.cal8;
    sub_array[9] = the_form.cal9;
    sub_array[10] = the_form.cal10;
    sub_array[11] = the_form.cal11;
    sub_array[12] = the_form.cal12;
    sub_array[13] = the_form.cal13;


    for(i = 0; i < calorie_array.length; i++)
    {
    // Give subtemp the value or the calorie times the time.
    subtemp = (calorie_array[i] * time_array[i].value);

    // Put the converted string into the form field.
    sub_array[i].value = checkAmount(subtemp);

    // Add the converted number value to subtotal.
    subtotal += roundFloat(subtemp);

    }
    for(i = 0; i < time_array.length; i++)
    {
    hours = (time_array[i].value);
    totalHrs += roundFloat(hours);
    }

    return subtotal;
    }

    function totalCalc() {
    var form;
    var subtotal;
    var total;
    var totalHrs;
    var hours;

    form = document.calc_form;
    // get the value of subtotal from totalCalc.
    subtotal = subCalc(form);
    totalHrs = subCalc(form);

    // Add the NUMBER values and subtotal.
    total = subtotal;

    // Convert this number into a string and display.
    form.total.value = checkAmount(total);

    // Adds total hours.
    hours = totalHrs
    form.total_hrs.value = checkAmount(hours);
    }


    function roundFloat(num) {
    num = parseFloat(num);
    num = Math.round(100*num)/100

    return num
    }

    function checkAmount(num) {
    // Convert into a floating point number.
    num = parseFloat(num)
    // Round the number off.
    num = Math.round(100*num)/100
    // Turn into a string.
    num = String(num)
    // Return the converted string.
    return num
    }

    //-->
    </script>
    And the html:
    <form name="calc_form" id="form" method="post">
    <table width="310" border="0" bgcolor="#EAEAEA">
    <tr>
    <th width="95"><h2>Activity</h2></th><th width="70"><h2>Time <br>(in hours)</h2></th>
    <th width="101"><h2>Calories used per hour</h2></th>
    </tr>
    <tr class="table-text">
    <td class="right"><p class="table-text">Sleeping</p></td>
    <td width="70">
    <p class="table-text">
    <input name="sleeping_time" type="text" id="sleeping_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101">
    <p class="table-text">
    <input name="cal0" type="text" id="cal0" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Eating/Reading/<br>Watching TV</p></td>
    <td width="70"><p class="table-text">
    <input name="TV_time" type="text" id="TV_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal1" type="text" id="cal1" size="6" maxlength="6" />
    </span>kcals</td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Sitting</p></td>
    <td width="70"><p class="table-text">
    <input name="sit_time" type="text" id="sit_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal2" type="text" id="cal2" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Cooking</p></td>
    <td width="70"><p class="table-text">
    <input name="cook_time" type="text" id="cook_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal3" type="text" id="cal3" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Standing</p></td>
    <td width="70"><p class="table-text">
    <input name="stand_time" type="text" id="stand_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal4" type="text" id="cal4" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Washing &amp; Dressing</p></td>
    <td width="70"><p class="table-text">
    <input name="wash_time" type="text" id="wash_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal5" type="text" id="cal5" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Walking Slowly</p></td>
    <td width="70"><p class="table-text">
    <input name="walk_S_time" type="text" id="walk_S_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal6" type="text" id="cal6" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Light housework</p></td>
    <td width="70"><p class="table-text">
    <input name="house_time" type="text" id="house_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal7" type="text" id="cal7" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Walking moderately</p></td>
    <td width="70"><p class="table-text">
    <input name="walk_M_time" type="text" id="walk_M_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal8" type="text" id="cal8" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Light gardening</p></td>
    <td width="70"><p class="table-text">
    <input name="gard_time" type="text" id="gard_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal9" type="text" id="cal9" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Dancing</p></td>
    <td width="70"><p class="table-text">
    <input name="danc_time" type="text" id="danc_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal10" type="text" id="cal10" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Walking up stairs</p></td>
    <td width="70"><p class="table-text">
    <input name="stairs_time" type="text" id="stairs_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal11" type="text" id="cal11" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Jogging</p></td>
    <td width="70"><p class="table-text">
    <input name="jog_time" type="text" id="jog_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal12" type="text" id="cal12" size="6" maxlength="6" />
    kcals</p></td>
    </tr>
    <tr>
    <td class="right"><p class="table-text">Squash</p></td>
    <td width="70"><p class="table-text">
    <input name="sqsh_time" type="text" id="sqsh_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="cal13" type="text" id="cal13" size="6" maxlength="6" />
    kcals</p></td>
    </tr>

    <tr>
    <td><p class="table-text">&nbsp;</p></td>
    <td width="70"><p class="table-text"></p></td>
    <td width="101"><p class="table-text"></p></td>
    </tr>

    <tr>
    <td><p class="table-text"><strong>Totals = </strong></p></td>
    <td width="70"><p class="table-text">
    <input name="total_hrs" type="text" id="total_hrs" size="3" />
    hrs</p></td>
    <td width="101"><p class="table-text">
    <input name="total" type="text" id="total" size="6" />
    kcals</p></td>
    </tr>

    <tr>
    <td colspan="2"><INPUT name="reset" value="Reset" TYPE="reset"> </td>
    <td colspan="2"><input name="Calculate Total" type="button" id="Calculate Total" value="Calculate Total" onclick="totalCalc();" /></td>
    </tr>
    </table>
    </form>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    You need to combine your totalCalc and subCalc functions into a single function.

    You need subCalc to return TWO DIFFERENT VALUES, and it can't (easily) do that.

    Separating them into two functions serves no purpose.

    Also, kill your roundFloat() and checkAmount() functions. They aren't doing anything useful that can't be done simpler.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Here's how I would do it. Note that by making your field names more readable you make it easier to give a readable error message when bad values are input.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function totalCalc( form ) 
    {
        var activities = {
            sleeping         : 72,
            TV               : 86,
            sitting          : 100,
            cooking          : 126,
            standing         : 130,
            washing          : 180,
            walking_slowly   : 156,
            housework        : 182,
            walking_medium   : 210,
            gardening        : 250,
            dancing          : 270,
            stairs           : 390,
            jogging          : 390,
            squash           : 546
        }
    
        var totalTime = 0;
        var totalCalories = 0;
        var badFields = [ ];
    
        for( var act in activities )
        {
            // get time corresponding to each calories value:
            var fld = form[act + "_time"];
            var time = fld.value;
            if ( isNaN(time) )
            {
                badFields.push( act );
                fld.value = "**INVALID**"; // OPTIONAL
                time = 0; 
            }
            time /= 60; // convert to hours
            totalTime += time ;
    
            var calories = activities[act] * time;
            totalCalories += calories;
            form[act + "_calories"].value = calories.toFixed(0);
        }
        form.total_hrs.value = totalTime.toFixed(2);
        form.total.value = totalCalories.toFixed(0);
        var msg = "";
        if ( badFields.length > 0 ) { msg = "Invalid fields: " + badFields; }
        document.getElementById("OOPS").innerHTML = msg;
    
    }
    </script>
    </head>
    <body>
    <form id="calc_form">
    Enter your times spent at each activity IN MINUTES:<hr/>
    Sleeping: <input name="sleeping_time"> <input readonly name="sleeping_calories" size="2"><br/>
    TV: <input name="TV_time"> <input readonly name="TV_calories" size="2"><br/>
    sitting: <input name="sitting_time"> <input readonly name="sitting_calories" size="2"><br/>
    cooking: <input name="cooking_time"> <input readonly name="cooking_calories" size="2"><br/>
    standing: <input name="standing_time"> <input readonly name="standing_calories" size="2"><br/>
    washing: <input name="washing_time"> <input readonly name="washing_calories" size="2"><br/>
    walking slowly: <input name="walking_slowly_time"> <input readonly name="walking_slowly_calories" size="2"><br/>
    housework: <input name="housework_time"> <input readonly name="housework_calories" size="2"><br/>
    walking medium: <input name="walking_medium_time"> <input readonly name="walking_medium_calories" size="2"><br/>
    gardening: <input name="gardening_time"> <input readonly name="gardening_calories" size="2"><br/>
    dancing: <input name="dancing_time"> <input readonly name="dancing_calories" size="2"><br/>
    stairs: <input name="stairs_time"> <input readonly name="stairs_calories" size="2"><br/>
    jogging: <input name="jogging_time"> <input readonly name="jogging_calories" size="2"><br/>
    playing squash: <input name="squash_time"> <input readonly name="squash_calories" size="2"><br/>
    <hr/>
    <span id="OOPS" style="color: red; font-weight: bold;"></span><br/><br/>
    Total hours: <input readonly name="total_hrs"/><br/>
    Total calories: <input readonly name="total"/><br/>
    <hr/>
    <input type="button" value="calculate" onclick="totalCalc(this.form)"/>
    </form>
    </body>
    </html>
    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.

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant, code looks a lot simpler now, but after trying it's not calculating correctly. Each variable is based on time, activity and a set value. The kcals bit was working ok, but isn't now. The hours is now working in your code but isn't adding up correctly e.g. 1 + 2 hrs is giving a result of 0.05?

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Also, kill your roundFloat() and checkAmount() functions. They aren't doing anything useful that can't be done simpler.
    Just removed roundFloat() and checkAmount() functions and it doesn't work as these are linked to by:
    // Adds total hours.
    hours = totalHrs
    form.total_hrs.value = checkAmount(hours);

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    You didn't read a VERY IMPORTANT PART of my page.

    Code:
    Enter your times spent at each activity IN MINUTES:<hr/>
    If you really want to input in hours instead (who wants to enter 0.25 hours instead of just 15 minutes???) just remove the line that says
    Code:
            time /= 60; // convert to hours
    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.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Quote Originally Posted by jmill23 View Post
    Just removed roundFloat() and checkAmount() functions and it doesn't work as these are linked to by:
    // Adds total hours.
    hours = totalHrs
    form.total_hrs.value = checkAmount(hours);
    ** SIGH **

    Look at my ALL NEW code.

    Where, for example, I do
    Code:
        form.total_hrs.value = totalTime.toFixed(2);
        form.total.value = totalCalories.toFixed(0);
    (in place of your way-overkill checkAmount() code).
    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.

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    You didn't read a VERY IMPORTANT PART of my page.

    Code:
    Enter your times spent at each activity IN MINUTES:<hr/>
    If you really want to input in hours instead (who wants to enter 0.25 hours instead of just 15 minutes???) just remove the line that says
    Code:
            time /= 60; // convert to hours
    Hi,
    Thought about that, but the calorie ratios are based on hours of activities.

    Thanks.

  • #9
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    ** SIGH **

    Look at my ALL NEW code.

    Where, for example, I do
    Code:
        form.total_hrs.value = totalTime.toFixed(2);
        form.total.value = totalCalories.toFixed(0);
    (in place of your way-overkill checkAmount() code).
    Thanks - I know the script is a bit extensive! That's why I got stuck - I'm not an expert - just trying to adapt it! Could you simplify it so it is shorter as there are scrpits passing through scripts....

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Quote Originally Posted by jmill23 View Post
    Hi,
    Thought about that, but the calorie ratios are based on hours of activities.

    Thanks.
    Yes. I know. And that's why, *BEFORE* I multiply the time by the number of calories per hour, I *FIRST DIVIDE BY 60* to convert the minutes into hours.

    But as I said, if you want to stick with hours just remove the ONE LINE that I indicated (and of course change the message).
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,519
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Quote Originally Posted by jmill23 View Post
    Could you simplify it so it is shorter as there are scrpits passing through scripts....
    Ummm...I *THOUGHT* that was what I did in my post #3.

    Did you actually *TRY* that code???

    The HTML isn't as pretty as yours, but it works. I really did test it, you know.

    Oh...what the heck. Here. I've add the ability to choose to use hours or minutes. And I've put it online to prove it works.
    http://mywhizbang.com/calories.html

    You can VIEW-->>SOURCE that page to see the updated code.
    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.

  • #12
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant! It looks good and I did try it before!


  •  

    Posting Permissions

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