Question

var num1 = $("input[id='weight']").val(),
    num2 = $("input[id='height']").val(),
    result = num1 / (num2*num2);

$("#submit").click(function() {
    $(".result").text(result);
});

它只显示NaN结果应该在哪里。为什么呢？

Answer 1

您应该在click事件中获取值，而不是在页面加载时：

$("#submit").click(function() {
  var num1 = $("input[id='weight']").val(),
    num2 = $("input[id='height']").val(),
    result = num1 / (num2*num2);
  $(".result").text(result);
});

还有一些其他原因导致NaN结果：

高度字段的计算结果为零。（虽然通常会给出结果Infinity而不是NaN。）
某些字段包含无法转换为数字的内容。
您在代码中使用了错误的名称，因此实际上并未从字段中获取值。
您正在使用带有错误小数分隔符的浮点数，例如当浏览器需要0.5时，0,5，反之亦然。

一些注意事项：

在进行计算之前，最好使用parseInt或parseFloat（这是合适的）解析字符串。
考虑使用input#weight或#weight这样的选择器是否可行。如果您在页面中有多个具有相同ID的元素，则只需要使用input[id='weight']之类的选择器，这是不推荐的。

Answer 2

$(function(){
    $("#submit").click(function() {
        var num1   = $("#weight").val(), 
            num2   = $("#height").val(), 
            result = num1 / (num2 * num2);
        $(".result").text(result);
    }); 
});

小解释：

问题不在于解析这里。恕我直言，问题是，在数学的那一刻，两个变量是空的或不是数字......

Answer 3

将它们转换为整数（假设您使用的是整数）：

var num1 = parseInt($("#weight").val(), 10),
    num2 = parseInt($("#height").val(), 10),
    result = num1 / (num2*num2);

Answer 4

试试这个

var num1 = parseInt($("input[id='weight']").val());
num2 = parseInt($("input[id='height']").val());
result = num1 / (num2*num2);

$("#submit").click(function() {
$(".result").text(result);
});

用jQuery做数学

4 个答案: