# Calculation

• Nov 13, 2012, 03:41
BrianBam
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??

Attachment 61006

Code:

<h3>TARGET HEART RATE TRAINING ZONES</h3>
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;">
<br />
<label>Age:
<span style="margin-left:70px; font-size:12px; font-weight:200;"> <input type="text" name="Years" /> years</span>
</label>
<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>

• Nov 13, 2012, 05:46
paul_wilkins
Quote:

Originally Posted by BrianBam
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
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.
• Nov 13, 2012, 15:56
BrianBam
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>
• Nov 14, 2012, 03:16
paul_wilkins
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/
• Nov 14, 2012, 05:14
BrianBam
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.
• Nov 14, 2012, 05:35
BrianBam
Wait. I probably need to use the validate code and then use the break statement, right?
• Nov 14, 2012, 05:57
BrianBam
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;
}

}

......................
• Nov 14, 2012, 13:59
paul_wilkins
You can just put a sanity check in the onchange function, just before the last line:

Code javascript:

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

• Nov 14, 2012, 17:34
BrianBam
Nice. thx. I think that sitepoint should have a tip option on here to tip someone if you really like they help you received.
• Nov 14, 2012, 17:45
paul_wilkins
Quote:

Originally Posted by BrianBam
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.
• Nov 15, 2012, 14:25
BrianBam
Well, where is this community voting?
• Nov 15, 2012, 14:28
paul_wilkins
Quote:

Originally Posted by BrianBam
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.
• Nov 15, 2012, 14:38
BrianBam
I see it now. I just didn't think to look there for it.