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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JS Help: How to I display my function's result with GetElementById?

    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.

    Code:
    <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>
    Last edited by VIPStephan; 12-10-2011 at 10:22 PM. Reason: fixed code BB tag

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I'm not sure about the calculations, but this at least gives a result:

    Code:
    <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>


  •  

    Tags for this Thread

    Posting Permissions

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