I'm currently trying to develop a simple mobile application that calculates your BMI, BMR etc.
There's two separate formulas to calculate male and female BMR.
For male: 66+(13.7 * weight)+(5 * height * 100)-(6.8 * age)
For female: 655+(9.6 * weight)+(1.8 * height * 100)-(4.7 * age)
The Problem: I had made use of the if else statement, whereby if the user clicked on "male" radio button at the formpage, the app will recognize that the user is a male and use the male BMR formula to calculate his BMR. The calculation of male BMR went alright and the result is displayed on the calculateinput.html page
E.g. If weight=100, height=2, age=18, gender=male, I'll get 2313.6 as BMR which is correct.
However, if I were to click on "female" radio button at the formpage, the app still uses the male BMR formula, instead of the female BMR formula to calculate her BMR. If weight=100, height=2, age=18, gender=female, I'll still get 2313.6 which is incorrect.
It seems like my codes are ignoring the user's gender input and applying the male BMR formula regardless of gender radioed at the form page, despite my if else statement...
Can someone identify and point out what mistake did I make? Your explanation is appreciated!
Below are my codes at common.js
function bmr(gender, height, weight, age){
var calculatedbmr;
if (gender="male"){
calculatedbmr=66+(13.7 * weight)+(5 * height * 100)-(6.8 * age);
}
else if(gender="female"){
calculatedbmr=655+(9.6 * weight)+(1.8 * height * 100)-(4.7 * age);
}
return calculatedbmr;
}Below are codes at my display result page.( named calculateinput.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="common.js"></script>
<script type="text/javascript">
var mybmi = localStorage.getItem("bmi");
var weightcategory;
if (mybmi<18.5){
weightcategory = "Underweight";
}
else if ((mybmi>=18.5)&&(mybmi<=24.99)){
weightcategory = "Normal Weight";
}
else if ((mybmi>=25)&&(mybmi<=29.99)){
weightcategory = "Overweight";
}
else if ((mybmi>=30)&&(mybmi<=34.99)){
weightcategory = "Class 1 Obesity";
}
else if ((mybmi>=35)&&(mybmi<=39.99)){
weightcategory = "CLass 2 Obesity";
}
else if (mybmi>=40){
weightcategory = "Morbidly Obese";
}
var theloseorgainmessagethatappears = localStorage.getItem("loseorgain");
var theweightdifference = localStorage.getItem("weightdifference");
var thebmrrate = localStorage.getItem("bmrrate");
</script>
</head>
<body>
<div data-role="page" id="mainpage">
<div data-role="header">
<a href="#" onclick="home()" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>BMI Calculator</h1>
</div>
<div data-role="main" class="ui-content">
<b>Your Results:</b><br><br>
Your weight category: <script>document.write(weightcategory)</script><br><br>
Your BMI is : <script>document.write(mybmi)</script><br><br>
<script>document.write(theloseorgainmessagethatappears)</script><br><br>
Your BMR is : <script>document.write(thebmrrate)</script> <br><br>
Weight Difference: <script>document.write(theweightdifference)</script>
</div>
<div data-role="footer" style="text-align:center;">
Developed by The Dom
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>Below are the codes at the form page where user enter his input.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/projectindex.css">
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="common.js"></script>
<script type="text/javascript">
function calculate(){
var bmi = bodymassindex(document.bmiform.height.value, document.bmiform.weight.value);
localStorage.setItem("bmi",bmi);
var loseorgain = loseorgainmessage(document.bmiform.weight.value, document.bmiform.dreamweight.value);
localStorage.setItem("loseorgain",loseorgain);
var weightdifference = myweightdifference(document.bmiform.weight.value, document.bmiform.dreamweight.value);
localStorage.setItem("weightdifference",weightdifference);
var bmrrate = bmr(document.bmiform.gender.value, document.bmiform.height.value, document.bmiform.weight.value, document.bmiform.age.value);
localStorage.setItem("bmrrate",bmrrate);
document.bmiform.submit();
}
</script>
</head>
<body>
<div data-role="page" id="bmicalculator">
<div data-role="header">
<a href="#" onclick="home()" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>BMI Calculator</h1>
</div>
<div data-role="main" class="ui-content">
Enter your height and weight. The system will calculate your BMI:<br><br>
<form id="bmiform" name="bmiform" action="calculateinput.html">
<label for="height">Height</label>
<input type="text" name="height" id="height" value="enter height in meters">
<label for="weight">Weight</label>
<input type="text" name="weight" id="weight" value="enter weight in KG">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Gender</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" checked>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
<label for="dreamweight">Dream Weight</label>
<input type="text" name="dreamweight" id="dreamweight" value="enter dream weight in KG">
<label for="age">Age</label>
<input type="text" name="age" id="age" value="enter age">
<label for="exercisefrequency">Exercise Frequency</label>
<select name="exercisefrequency" id="exercisefrequency">
<option value="hardlyexercise">Hardly Exercise</option>
<option value="exercise1to3timesaweek">Exercise 1 to 3 times a week</option>
<option value="exercise3to5timesaweek">Exercise 3 to 5 times a week</option>
<option value="exercise6to7timesaweek">Exercise 6 to 7 times a week</option>
<option value="intensiveexercisemorethan7timesaweek">Intensive Exercise more than 7 times a week</option>
</select><br>
<input type="button" value="Calculate" onclick="calculate()">
</form>
</div>
<div data-role="footer" style="text-align:center;">
Developed by The Dom
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</div>
</body>
</html>
