javascript - Jquery result display issue -
i trying create bmi calculator , tried following .
$(document).ready(function() { // convert ft inches function convertheight(ft) { return ft * 12; } // calculate total height function showbmi() { var weight = document.getelementbyid('weight').value * 1; var height_ft = document.getelementbyid('height_ft').value * 1; var height_in = document.getelementbyid('height_in').value * 1; var height = convertheight(height_ft) + height_in; var female_h = (height * height) / 30; var male_h = (height * height) / 28; var gender; var x = document.getelementsbyname("gender"); (var = 0; < x.length; i++) { if (x[i].checked == true) { gender = x[i].value; break; } } var bmi = "?"; if (gender == "female") { bmi = (math.round((weight * 703) / (height * height))); if (isnan(bmi)) bmi = "?"; } else { bmi = (math.round((weight * 703) / (height * height))); if (isnan(bmi)) bmi = "?"; } var bmi_msg = "?"; if (bmi < 15) { bmi_msg = "very severely underweight"; } else if (bmi <= 16) { bmi_msg = "severely underweight"; } else if (bmi <= 18.4) { bmi_msg = "underweight"; } else if (bmi <= 24.9) { bmi_msg = "normal"; } else if (bmi <= 29.9) { bmi_msg = "overweight"; } else if (bmi <= 34.9) { bmi_msg = "obese class (moderately obese)"; } else if (bmi <= 39.9) { bmi_msg = "obese class ii (severely obese)"; } else { bmi_msg = "obese class iii (very severely obese)"; } $("#result").text(bmi); return bmi; $("#comment").text(bmi_msg); return bmi_msg; } //bmi infos //finish $("form#calc input").bind("keydown", function() { settimeout(function() { showbmi(); }, 100); return true; }); $("form#calc input").bind("change", function() { showbmi(); }); $("form#calc radio").bind("change", function() { showbmi(); }); $("form#calc").bind("submit", function() { showbmi(); return false; }); });
the bmi displays correctly, messages forbmi values not displaying. checked console , says code unreachable. can throw light goin wrong, , how can improve code.
you have return statement after setting result
content before setting comment, $("#comment").text(bmi_msg);
never executed.
a function return control caller method return statement executed, there should 1 return statement in execution flow.
so remove return bmi;
code comment setting work
$(document).ready(function() { // convert ft inches function convertheight(ft) { return ft * 12; } // calculate total height function showbmi() { var weight = $('#weight').val() * 1; var height_ft = $('#height_ft').val() * 1; var height_in = $('#height_in').val() * 1; var height = convertheight(height_ft) + height_in; var female_h = (height * height) / 30; var male_h = (height * height) / 28; var gender = $('input[name="gender"]:checked').val(); var bmi = "?"; if (gender == "female") { bmi = (math.round((weight * 703) / (height * height))); if (isnan(bmi)) bmi = "?"; } else { bmi = (math.round((weight * 703) / (height * height))); if (isnan(bmi)) bmi = "?"; } var bmi_msg = "?"; if (bmi < 15) { bmi_msg = "very severely underweight"; } else if (bmi <= 16) { bmi_msg = "severely underweight"; } else if (bmi <= 18.4) { bmi_msg = "underweight"; } else if (bmi <= 24.9) { bmi_msg = "normal"; } else if (bmi <= 29.9) { bmi_msg = "overweight"; } else if (bmi <= 34.9) { bmi_msg = "obese class (moderately obese)"; } else if (bmi <= 39.9) { bmi_msg = "obese class ii (severely obese)"; } else { bmi_msg = "obese class iii (very severely obese)"; } $("#result").text(bmi); $("#comment").text(bmi_msg); return bmi; } //bmi infos var timer; $("#calc input").bind("keydown change", function() { cleartimeout(timer); timer = settimeout(function() { showbmi(); }, 100); return true; }); $("#calc").bind("submit", function() { cleartimeout(timer); showbmi(); return false; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="calc"> <input id="weight" /> <input id="height_ft" /> <input id="height_in" /> <br /> <input name="gender" type="radio" value="male" /> <input name="gender" type="radio" value="female" /> <br /> <input type="submit" value="check" /> <div id="result"></div> <div id="comment"></div> </form>
note: since using jquery, why not use utility methods get/set values/content
Comments
Post a Comment