Проблема с отображением результатов JQuery

Question

Я пытаюсь создать калькулятор bmi и попробовал следующее.

$(document).ready(function() { 
// Convert ft to 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"); 
    for (var i = 0; i < 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 I (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; 
}); 
}); 

bmi отображается правильно, но значения сообщений forbmi не отображаются. Я проверил консоль, и он говорит, что код недоступен. Может кто-нибудь бросить какой-то свет, где я ошибаюсь, и как я могу улучшить этот код.

Answer 1

Перед установкой комментария у вас есть оператор возврата после установки result, поэтому $("#comment").text(bmi_msg); никогда не выполняется.

Функция возвращает управление методу вызывающего, как только выполняется оператор return, поэтому в потоке выполнения должен быть только один оператор return.

Так удалить return bmi; из кода для комментария настройки для работы

$(document).ready(function() { 
 
    // Convert ft to 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 I (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>

Примечания: Так как вы используете JQuery, почему бы не использовать свои служебные методы, чтобы получить/установить значение/content