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

  <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 &#8220;target heart rate training zones&#8221;.     
  </p>
    
    


    <form action="" id="HeartRateForm" [COLOR=#0000CD]onchange="CalculateFatHeartRates()[/COLOR]">
    
    
    <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>
    
    
[COLOR=#0000CD]       <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>[/COLOR]
    
</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 [B][COLOR=#FF0000]id="FatBurningHeartRate"[/COLOR][/B] 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>

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.


[s][color="red"]var Years;
var RestingHeartRate;
var BaseHeartRate=220;[/color][/s]


function CalculateFatHeartRates(Years, RestingHeartRate, BaseHeartRate)
{
    ...
}

So now we have the question of how do we get those variables to the function?

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.


<form action="" id="HeartRateForm"[s][color="red"] onchange="CalculateFatHeartRates()"[/color][/s]>


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.

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,

   &lt;script type="text/javascript"&gt;

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;
}

};

&lt;/script&gt;

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:

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.

Wait. I probably need to use the validate code and then use the break statement, right?

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;
}

}

You can just put a sanity check in the onchange function, just before the last line:


if (!years || !restingHeartRate) {
    return;
}

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.

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.

I see it now. I just didn’t think to look there for it.