javascript - 使用 jQuery 做数学

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

您应该在点击事件中获取值，而不是在页面加载时获取值:

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

还有一些其他原因可能导致结果为 NaN:

• 高度字段的计算结果为零。 (尽管这通常会给出结果Infinity而不是NaN。)

• 某些字段包含无法转换为数字的内容。

• 您在代码中使用了错误的名称，因此您实际上并未从字段中获取值。

• 您使用的 float 带有错误的小数分隔符，例如当浏览器期望 0,5 时，为 0.5，反之亦然。

一些注意事项:

• 在进行计算之前，最好使用 parseInt 或 parseFloat(无论哪种都合适)解析字符串。

• 考虑使用像 input#weight 这样的选择器还是仅使用 #weight 是否可行。如果页面中有多个具有相同 id 的元素，则只需使用像 input[id='weight'] 这样的选择器，但不建议这样做。