SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Calculation

  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calculation

    Okay this is my first try at doing some calculations using javascript...and I think you will see that. ha

    So here is an image showing what I'm trying to accomplish.

    I'm trying to do this calculation (((220 -Age in years -Resting Hear Rate) * .5) + Resting Heart Rate) and then
    concatenate it with (((220 -Age in years -Resting Hear Rate) * .65) + Resting Heart Rate)

    A couple starting questions that I have are

    1) How do I leave the variable blank? var Years; and Var RestingHeartRate;
    2) Do I have to run a loop to get the data that is entered into the fields??

    FatBurningZone.jpg

    Code:
      <h3>TARGET HEART RATE TRAINING ZONES</h3>
            <p >Your heart rate during exercise will determine what benefits you receive from your workout.  Your 
    heart rate is meaured in beats per minute.  The heart rate range that you exercise in has been
    called “target heart rate training zones”.     
      </p>
        
        
    
    
        <form action="" id="HeartRateForm" onchange="CalculateFatHeartRates()">
        
        
        <div class="left" style="margin-top:-10px; margin-bottom:15px; width:775px;font-size:14px; font-weight:bold;">
            <p style="font-size:20px;">Calculate your training "zones"</p>
            <br />
            <label>Age:
                <span style="margin-left:70px; font-size:12px; font-weight:200;"> <input type="text" name="Years" /> years</span>
            </label>
            <label>Enter your resting heart rate: 
                <span style="margin-left:70px; font-size:12px; font-weight:200;"><input type="text" name="RestingHeartRate" /> Beats Per Minute (BPM)</span> <span style="margin-left:290px; font-weight:100px;" ><a  href="#"> Need help? </a></span>
            </label>
                  
            
            <!--
            <p class="calculated accented">Fat Burning "zone" <span><span id="onerepmax">&nbsp;</span> lbs. <!--(estimate)--></span></p>
           <!-- <p class="calculated accented">Cardiovascular fitness "zone" <span><span id="strength">&nbsp;</span> %</span></p>-->
        </div>
        
        
           <script type="text/javascript">
        
        
        var Years;
        var RestingHeartRate;
         var BaseHeartRate=220;
        
        
    function CalculateFatHeartRates(Years,RestingHeartRate,BaseHeartRate)    
                    
                    {
                        
    var CalculatedHeartRateGoal= (((BaseHeartRate - Years - RestingHeartRate) * .50) + RestingHeartRate) + "to" + 
    (((BaseHeartRate - Years - RestingHeartRate) * .65) + RestingHeartRate);
    
    document.getElementById("FatBurningHeartRate").innerHTML=CalculatedHeartRateGoal;
    }
        
        
        
        </script>
        
    </form>
    
    
    
    
    
    <p style="font-size:18px; font-weight:bold; margin-bottom:-10px;">Your target heart rate training "zones" are:   <span style="font-size:16px; float:right;">Beats per minute (BPM)   </span>  </p>
            
           
          
      <p  style="float:right;  margin-bottom:80px; background-image:url(../../includes/images/Fat_Burning_Zone.png); width:780px; height:89px;"><span id="FatBurningHeartRate" style="float:right; margin-right:40px; font-size:16px; margin-top:35px; color:#c88d1c;">  </span> <p>     
            
    <p  style="background-color:#c88d1c; width:758px; color:#ffffff; float:right; margin-top:-80px; margin-right:2px; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px;"> Exercising in your "fat burning zone" will increase the percentage of Calories that you burn from fat.  However, it won't increase the number of TOTAL Calories that you burn.  </p>
    Last edited by spikeZ; Nov 13, 2012 at 05:25.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    A couple starting questions that I have are

    1) How do I leave the variable blank? var Years; and Var RestingHeartRate;
    You don't need to declare those variables where you have them in your existing code. They are all used only within the function, so their declaration as the function arguments is enough.

    Code:
    var Years;
    var RestingHeartRate;
    var BaseHeartRate=220;
    
    
    function CalculateFatHeartRates(Years, RestingHeartRate, BaseHeartRate)
    {
        ...
    }
    So now we have the question of how do we get those variables to the function?

    Quote Originally Posted by BrianBam View Post
    2) Do I have to run a loop to get the data that is entered into the fields??
    Yes, that question.

    To do that we remove the inline event attribute (it doesn't belong there) so that we can use a more flexible solution via scripting instead.

    Code:
    <form action="" id="HeartRateForm" onchange="CalculateFatHeartRates()">
    Code javascript:
    document.getElementById('HeartRateForm').onchange = function () {
        var form = this,
            years = parseFloat(form.elements.Years.value) || 0,
            restingHeartRate = parseFloat(form.elements.RestingHeartRate.value) || 0,
            baseHeartRate = 220;
     
        CalculateFatHeartRates(years, restingHeartRate, baseHeartRate);
    };

    Using "|| 0" allows us to default to a value of 0, if the form doesn't contain a numeric value.

    You will also pick up over time that function and variable names should start as lowercase. The first letter tends to only capitalised in rare situations, such as when the function is a special Constructor, or when a variable is all uppercase to indicate that it's supposed to be a constant.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I thought I understood you, but since I can't get the code to work I don't.

    This is what I've been trying,

    <script type="text/javascript">

    document.getElementById('HeartRateForm').onchange = function () {
    var form = this,
    years = parseFloat(form.elements.Years.value) || 0,
    restingHeartRate = parseFloat(form.elements.restingHeartRate.value) || 0,
    baseHeartRate = 220;



    calculateFatHeartRates(years, restingHeartRate, baseHeartRate);

    {

    var calculatedHeartRateGoal= (((baseHeartRate - years - restingHeartRate) * .50) + restingHeartRate) + "to" +
    (((baseHeartRate - years - restingHeartRate) * .65) + RestingHeartRate);

    document.getElementById("FatBurningHeartRate").innerHTML=calculatedHeartRateGoal;
    }

    };





    </script>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    There are some inconsistencies in the capitalization there, and I see that a line declaring a function is missing.

    Here's a working version of the code:
    http://jsfiddle.net/pmw57/dZE2k/1/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Um so basically I wasn't even close...Haha. Thx. I might have to just hire you next time.


    If I want the function to only fun if both fields are not zero then can I use something like this?

    function check()

    {

    var x=document.forms["hearRateForm"]["years"]["restingHeartRate"].value;
    if(x!==null)


    I tried that but it didn't quite work.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait. I probably need to use the validate code and then use the break statement, right?

  7. #7
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I close doing this at the top of the javascript?

    <script type="text/javascript">


    function validateForm()

    {
    var x=document.forms["hearRateForm"]["years"]["restingHeartRate"].value;
    if(x!==null || x="")
    {
    break;
    }

    }

    ......................

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You can just put a sanity check in the onchange function, just before the last line:

    Code javascript:
    if (!years || !restingHeartRate) {
        return;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice. thx. I think that sitepoint should have a tip option on here to tip someone if you really like they help you received.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Nice. thx. I think that sitepoint should have a tip option on here to tip someone if you really like they help you received.
    You're in luck then, for we are currently holding the annual community awards. You're welcome to head along and nominate people in different categories for the help that they have provided.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, where is this community voting?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Well, where is this community voting?
    Do you see the SPF COMMUNITY AWARDS link in my signature? If not - the top of each forum has a global thread called It's SPF Community Awards Time!!! too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see it now. I just didn't think to look there for it.


Bookmarks

Posting Permissions

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