jQuery UI слайдер не обновляется должным образом в калькуляторе BMI

Question

Я пытаюсь сделать калькулятор BMI, который автоматически вычисляет BMI, когда кто-либо изменяет значение (без нажатия кнопки расчета). В настоящее время у меня есть два выбора входа для ног и дюймов, а затем я использовал jQuery UI, чтобы использовать слайдер для ввода веса. Моя проблема заключается в том, что, хотя входы выбора приводят к пересчету ИМТ, любые изменения в слайдере, похоже, не заставляют ИМТ пересчитывать. Я новичок в JavaScript и jQuery и ценю помощь.

Javascript:

"use strict"; 
$(document).ready(function() { 
    $("#sliderWeight").slider({ 
    value: 150, 
    min: 91, 
    max: 443, 
    slide: function(evt, elem) { 
    $("#weight").text(elem.value); 
    }, 
    start: function(evt, elem) { 
    $("#weight").addClass("heavytext") 
    }, 
    stop: function(evt, elem) { 
    $("#weight").removeClass("heavytext") 
    } 
}); 

$("#weight").text($("#sliderWeight").slider("value")); 


function displayVals() { 
var feetValues = parseInt($("#feet").val()); 
var inchValues = parseInt($("#inches").val()); 
var inches = feetValues * 12 + inchValues; 
var weightSlider = parseInt($("#sliderWeight").slider("value")); 
var bmiWeight = weightSlider * 703 
var bmiHeight = inches * inches 
var bmi = Math.round(bmiWeight/bmiHeight); 
$("#totalinches").html("You selected: <b>Feet:</b> " + feetValues + 
    " <b>Inches:</b> " + inchValues + "<br>That is " + inches + " inches."); 
$("#bmi").html("Your BMI is " + bmi); 
} 
$("select").change(displayVals); 
displayVals(); 
}); 

HTML:

<select id="feet"> 
    <option value="4">4 feet</option> 
    <option value="5">5 feet</option> 
    <option value="6">6 feet</option> 
    <option value="7">7 feet</option> 
</select> 
<select id="inches"> 
    <option value="0">0 inches</option> 
    <option value="1">1 inches</option> 
    <option value="2">2 inches</option> 
    <option value="3">3 inches</option> 
    <option value="4">4 inches</option> 
    <option value="5">5 inches</option> 
    <option value="6">6 inches</option> 
    <option value="7">7 inches</option> 
    <option value="8">8 inches</option> 
    <option value="9">9 inches</option> 
    <option value="10">10 inches</option> 
    <option value="11">11 inches</option> 
</select> 
<br> 
<br> 

<div id="totalinches"></div> 
<br> 
<h3>Please select your weight:</h3> 
<br> 

<div id="sliderWeight" class="sliderClass"></div> 
<br> 
<div id="dynamicweight">Your current weight is <span id="weight"></span> lbs. 
</div> 
<div id="bmi"></div> 

CSS:

.heavytext { 
    font-weight: bold; 
    color: #29abe2; 
} 

.sliderClass { 
    width: 400px; 
} 

JSFiddle-BMI Calculator

Answer 1

вызова метода отображения в случае слайд

$("#sliderWeight").slider({ 
 
    value: 150, 
 
    min: 91, 
 
    max: 443, 
 

 

 
    slide: function(evt, elem) { 
 
     $("#weight").text(elem.value); 
 
     displayVals(); 
 
    }, 
 
    start: function(evt, elem) { 
 
     $("#weight").addClass("heavytext") 
 
    }, 
 
    stop: function(evt, elem) { 
 
     $("#weight").removeClass("heavytext") 
 
    } 
 
    });