Javascript - 输入值 NaN

Question

我是 Javascript 新手，当时正在做一些 DOM 操作，我尝试创建 BMI( body 质量指数)计算器，即 bodyMass/( bodyWeight * bodyWeight )。

然后我完成了一些代码:

HTML:

var bodyMass, bodyWeight;
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
document.getElementById("check").onclick = function() {
  alert(BMI);
}

<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>

Answer 1

您需要在单击按钮时计算体重指数，而不是在页面加载时计算。通过不将代码放置在事件处理程序中，您将在输入任何值之前计算所有内容。

<input type="text" placeholder="Body Mass" id="bodyMass">
<input type="text" placeholder="Body Weight" id="bodyWeight">
<button id="check">CHECK</button>
<div id="result"></div>
<script>
var bodyMass, bodyWeight;

document.getElementById("check").onclick = function() {
bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
var BMI = bodyMass / (bodyWeight * bodyWeight);
  alert(BMI);
}
</script>

要确保在发出警报之前该值不是 NaN，请使用 isNaN。

 <input type="text" placeholder="Body Mass" id="bodyMass">
    <input type="text" placeholder="Body Weight" id="bodyWeight">
    <button id="check">CHECK</button>
    <div id="result"></div>
    <script>
    var bodyMass, bodyWeight;

    document.getElementById("check").onclick = function() {
    bodyMass = parseInt(document.getElementById("bodyMass").value, 10);
    bodyWeight = parseInt(document.getElementById("bodyWeight").value, 10);
    var BMI = bodyMass / (bodyWeight * bodyWeight);
    if(!isNaN(BMI)){
      alert(BMI);
    } else {
     alert("Please enter two valid numbers!");
    }
    }
    </script>