...

View Full Version : JS Help: How to I display my function's result with GetElementById?



js novice
12-10-2011, 09:48 PM
Hello!

I am working on creating a basic calorie calculator with Javascript and my code is not showing the results after the user makes their selections. I've created a simple function to obtain the user's weight, activity and duration info but when I use the GetElementById to retrieve the result, it does not show up. Any help would be much appreciated to make this work. Thanks. :confused:



<head>
<script type="text/javascript">
var myActivity = new Array();
myActivity[100] = "6.670";
myActivity[200] = "3.811";
myActivity[300] = "3.343";
myActivity[400] = "3.343";
myActivity[500] = "3.343";
myActivity[600] = "4.765";
myActivity[700] = "4.765"

function CalorieBurner() {
//user prompt
var caloriesBurned;
var myForm = document.form;

//processing
var caloriesBurned = (myForm.duration[formElement.value] * (myActivity[formElement.value] * 3.5 * myForm.weight[formElement.value])/200);

FormElement = myForm.activity[myForm.activity.selectedIndex];

document.getElementById("caloriesBurned").innerHTML = "You will burn " + caloriesBurned + "calories doing " + myForm.duration[formElement.value] + "minutes of " + FormElement.text;
}
</script>
</head>



<body>


<form name="form">
Enter your weight: <input type="text" name="weight" />
<br /><br />

Select an activity:
<br />
<select name="activity">
<option value="100"> Backpacking, Hiking with pack </option>
<option value="200"> Bagging grass, leaves </option>
<option value="300"> Bathing dog </option>
<option value="400"> Carpentry, general</option>
<option value="500"> Carrying infant, level ground </option>
<option value="600"> Carrying infant, upstairs </option>
<option value="700"> Children's games, hopscotch... </option>
</select>
<br /><br /><br />

Enter the duration of your activity (in minutes): <input type="text" name="duration" />
</form>
<br /><br /><br />

<input type="button" value="Results" name="btnUpdate" onClick="CalorieBurner()"/>
<br /><br /><br />

<div id="caloriesBurned"></div>


</body>
</html>

xelawho
12-10-2011, 10:14 PM
I'm not sure about the calculations, but this at least gives a result:



<html>
<head>
<head>
<script type="text/javascript">
var myActivity = new Array();
myActivity[100] = "6.670";
myActivity[200] = "3.811";
myActivity[300] = "3.343";
myActivity[400] = "3.343";
myActivity[500] = "3.343";
myActivity[600] = "4.765";
myActivity[700] = "4.765"

function CalorieBurner() {
//user prompt
var caloriesBurned;
var myForm = document.form;

//processing
formElement = myForm.activity[myForm.activity.selectedIndex];
alert(myForm.duration.value)
var caloriesBurned = (myForm.duration.value * myForm.activity.value * 3.5 * myForm.weight.value)/200;



document.getElementById("caloriesBurned").innerHTML = "You will burn " + caloriesBurned + " calories doing " + myForm.duration.value + " minutes of " + formElement.text;
}
</script>
</head>



<body>


<form name="form">
Enter your weight: <input type="text" name="weight" />
<br /><br />

Select an activity:
<br />
<select name="activity">
<option value="100"> Backpacking, Hiking with pack </option>
<option value="200"> Bagging grass, leaves </option>
<option value="300"> Bathing dog </option>
<option value="400"> Carpentry, general</option>
<option value="500"> Carrying infant, level ground </option>
<option value="600"> Carrying infant, upstairs </option>
<option value="700"> Children's games, hopscotch... </option>
</select>
<br /><br /><br />

Enter the duration of your activity (in minutes): <input type="text" name="duration" />
</form>
<br /><br /><br />

<input type="button" value="Results" name="btnUpdate" onClick="CalorieBurner()"/>
<br /><br /><br />

<div id="caloriesBurned"></div>


</body>
</html>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum