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

您的代码中存在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通过Id获取字段，但是然后恢复为vanilla javascript输出，你可以做到

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

当然，使用本机javascript调用没有任何问题，你可能更容易坚持使用这种方式。

其他一些观察结果：

根本不需要这一点：onchange="this.setAttribute('value',this.value);"
您应该强制说明字段只输入了数字，因为您正在对它们进行数学运算。考虑使用parseFloat之类的

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

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

Answer 2

getElementById，而不是ByID。不要将最后一个字符大写。

无法计算html输入类型范围的值

2 个答案: