JavaScript 使用 parseFloat 的计算器

Question

我需要帮助完成大学作业。我需要使用函数 calcBMI () 创建一个 BMI 计算器，该计算器将从文本输入中获取值并将总数放在第三个输入中。然后需要使用 parseFloat () 函数将计算出的值转换为浮点数。然后需要使用 getElementById () 方法在函数内引用文本输入。最后，必须通过添加一个事件侦听器来执行计算，该侦听器侦听表单中已包含的按钮上的单击事件，并在事件发生时执行 calcBMI () 函数。

我不太清楚如何使用 parseFloat () 功能，我认为这是阻止我完成这个项目的原因。顺便说一句，我已经问过我的教授，他说它不能使用 use jQuery 或任何其他库，只能使用纯 JavaScript.

<form method="post" name="frmBMI">
 <div>
  <label for="bmi_weight">Weight</label>
  <input type="text" id="bmi_weight" placeholder="Weight"> lbs.
 </div>

 <div>
  <label for="bmi_height">Height</label>
  <input type="text" id="bmi_height" placeholder="Height"> in.
 </div>

 <div>
  <label for="bmi_amt">BMI</label>
  <input type="text" id="bmi_amt" placeholder="Total" readonly>
 </div>

 <div>
  <input type="submit" onclick="calcBMI ();" value="Calculate BMI">
 </div>
</form>

<script type="text/javascript">
 function calcBMI () {
  h = document.getElementById ("bmi_height").value;
  w = document.getElementById ("bmi_weight").value;
  document.getElementById ("bmi_amt").innerHTML = h / w;
 }
</script>

Answer 1

您可以将输入字段的值传递给 parseFloat 函数，如果成功，该函数将 return 一个您可以用来进行算术运算的数字：

function calcBMI () {
    var h = parseFloat(document.getElementById("bmi_height").value);
    var w = parseFloat(document.getElementById("bmi_weight").value);
    var result = h / w;
    document.getElementById ("bmi_amt").innerHTML = result;
}

当然，用户可以在输入字段中输入任意文本，您最好使用 isNaN 函数检查它是否是有效数字：

function calcBMI () {
    var h = parseFloat(document.getElementById("bmi_height").value);
    var w = parseFloat(document.getElementById("bmi_weight").value);
    if (isNaN(h) || isNaN(w)) {
        alert('Please enter a valid number');
    } else {
        var result = h / w;
        document.getElementById("bmi_amt").innerHTML = result;
    }
}

在使用parseFloat 函数时，还有一个重要方面需要注意。它与文化无关。这意味着小数点分隔符总是.。因此，如果您的用户本地文化使用 , 作为小数点分隔符，您可能希望在将其传递给 parseFloat 函数之前将其替换为 .。如果不这样做，parseFloat 函数将在 , 符号处停止解析，您可能会得到意想不到的结果。

更新：

为避免重新加载表单，您应该确保从提交按钮的 onclick 处理程序 returning false：

<input type="submit" onclick="calcBMI(); return false;" value="Calculate BMI" />

或者只是让你的 calcBMI 函数 return false:

function calcBMI () {
    var h = parseFloat(document.getElementById("bmi_height").value);
    var w = parseFloat(document.getElementById("bmi_weight").value);
    if (isNaN(h) || isNaN(w)) {
        alert('Please enter a valid number');
    } else {
        var result = h / w;
        document.getElementById("bmi_amt").innerHTML = result;
    }

    return false;
}

然后在注册您的 onclick 处理程序时 return 此函数的结果：

<input type="submit" onclick="return calcBMI();" value="Calculate BMI" />

基本上，这将阻止将表单提交回服务器并显示计算结果的表单的默认操作。

JavaScript 使用 parseFloat 的计算器

JavaScript calculator using parseFloat

javascript

forms

parsefloat