无法计算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）JavaScript是区分敏感，并没有功能document.getElementByID它是document.getElementById（小写“d”）

3）您的代码会在页面加载时执行一次，您需要在每次更改input字段时执行该代码。要做到这一点，代码应该在jQuery $(document).ready()函数中。 4）你计算bmi的方法不返回任何值，只是设置一个等于结果的变量（bmi）。你想返回这个值，以便用它输出为html。

世态炎凉的是，你使用jQuery来获取凭身份证等领域，但随后恢复到香草的javascript的输出，你可以作出这样的

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

当然，没有什么错误使用本地JavaScript电话，它可能会更容易让你坚持一种或另一种方式。

---

其他一些意见：

• 你不需要这一点在所有：onchange="this.setAttribute('value',this.value);"

• 您应该强制执行该领域的只有数字输入，因为你是在做数学运算他们。考虑使用parseFloat像

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

---

工作例如：http://jsfiddle.net/935fnmyx/8/