Невозможно рассчитать значения диапазона ввода типа html

Question

Я хотел бы рассчитать значения входных значений диапазона Html. Просто хотите, чтобы результат изменялся динамически при изменении диапазона ввода. Функция, которую я пишу, недостаточно ясна и, похоже, не работает. Может кто-нибудь может мне помочь. Спасибо заранее. Вот мой HTML-код:

<form> 
Height: 
<input type="range" id="height" onchange="this.setAttribute('value',this.value);" min="0"  max="200" step="0.1" value="0" /> 
<br> 
Weight: 
<input type="range" id="weight" onchange="this.setAttribute('value',this.value);" min="0" max="200" step="0.1" value="0" /> 
<br> 
</form> 
<div id="displaybmi"> Your BMI : </div> 

Javascript Код

function(){ 
     var height, weight; 
     height = $('#height').value; 
     weight = $('#weight').value; 

     function calbmi(weight,height){ 
         bmi = weight/(height*height); 
     } 
     document.getElementByID('displaybmi').innerHTML = calbmi(weight,height); 

}

http://jsfiddle.net/wm81/935fnmyx/4/

Answer 1

getElementById, не ByID. Не используйте символ последнего символа.

Answer 2

В вашем коде есть 4 проблемы и 1 несоответствие.

1) JQuery использует функцию val(), чтобы получить значение входного сигнала, а не свойство value

изменение:

height = $('#height').value; 
weight = $('#weight').value; 

к

height = $('#height').val(); 
weight = $('#weight').val(); 

2) Мусор является регистру чувствительный и не имеет функции document.getElementByID это document.getElementById (нижний регистр "d")

3) Ваш код выполняется один раз, когда страница загружается, вам нужно выполнить ее каждый раз, когда изменяется одно из полей вашего input. Для этого код должен находиться внутри функции jQuery $(document).ready().

4) Метод, который вычисляет bmi, не возвращает никакого значения, он просто устанавливает переменную (bmi), равную результату. Вы хотели вернуть это значение, чтобы использовать его для вывода в html.

Непостоянства в том, что вы используете JQuery, чтобы получить поле от Id, но затем вернуться к ванили Javascript для вывода, вы могли бы сделать, что

$('#displaybmi').html(calbmi(weight,height)); 

Конечно, нет ничего плохого в использовании нативный JavaScript звоните, вам может быть проще, если вы будете придерживаться того или иного пути.

---

Некоторые другие наблюдения:

• Вам не нужен этот бит на все: onchange="this.setAttribute('value',this.value);"

• следует принуждать, что поля имеют только цифры введены, как вы делаете математические операции их.Рассмотрите возможность использования parseFloat как

  height = parseFloat($('#height').val())

---

Рабочего пример: http://jsfiddle.net/935fnmyx/8/