体重指数计算器 JavaScript

Question

我是 JavaScript 的新手，但我尝试通过一些小项目来挑战自己。每当我遇到困难时，我都会 Google 问题并尝试以这种方式解决它，但这次我无法弄清楚为什么我的代码无法正常工作。

function berekenBMI() {
  var gewicht = Number(document.getElementById("gewicht"); // weight
  var lengte = Number(document.getElementById("lengte"); // height
  var BMI = gewicht / Math.pow(lengte, 2); // the calculation 

  document.getElementById("output").innerHTML = Math.round(BMI * 100) / 100;

  if (BMI < 18.5) document.getElementById("comment").innerHTML = '5';
  if (BMI >= 18.5 && BMI < 25) document.getElementById("comment").innerHTML = '2';
  if (BMI >= 25 && BMI <= 30) document.getElementById("comment").innerHTML = 'geen';
  if (BMI > 30) document.getElementById("comment").innerHTML = 'nooit geen';
}

<h2> BMI Berekenen </h2>

<div class="container">

  <label>Gewicht (KG): </label>
  <input type="text" id="gewicht">

  <label>Lengte (Meters): </label>
  <input type="text" id="lengte">

  <input type="submit" value="Bereken mijn BMI" onclick="berekenBMI()">

</div>

<h3>
  Jouw BMI is: <span id="output"> ? </span>
</h3>

<h4>
  Je mag <span id="comment"> zoveel </span> koekjes!
</h4>

Answer 1

这里有2个问题。第一个相当简单，您只是在分配 gewicht 和 lengte 变量以关闭 Number 函数时缺少右括号。

第二个问题对于未经训练的人来说不太明显。在您的 JavaScript 中，您调用了 document.getElementById() 两次，并且两次都试图将输出转换为 Number。 document.getElementById 的输出是一个 Element 对象。它试图将对象本身转换为一个数字，returns NaN（不是数字）。要解决此问题，请在每个需要从中获取字符串值的 document.getElementById() 之后添加 .value。值属性包含文本框的字符串值。几乎每个接受输入的元素都是如此。

Answer 2

我猜你在使用 querySelector 时错过了#。 # 当querySelector用于ID（getElementById）时使用，也关闭分配的var的括号，并使用.value从字段中获取值。

<script type="text/javascript">

        function berekenBMI() {
            var gewicht = Number(document.getElementById("#gewicht").value); // weight
            var lengte = Number(document.getElementById("#lengte").value); // height

            var BMI = gewicht / Math.pow(lengte, 2); // the calculation 

            document.getElementById("#output").innerHTML = Math.round(BMI * 100) / 100;

            if (BMI < 18.5) document.getElementById("#comment").innerHTML = '5';
            else if (BMI >= 18.5 && BMI < 25) document.getElementById("#comment").innerHTML = '2';
            else if (BMI >= 25 && BMI <= 30) document.getElementById("#comment").innerHTML = 'geen';
            else if (BMI > 30) document.getElementById("#comment").innerHTML = 'nooit geen';
        }


    </script>

体重指数计算器 JavaScript

BMI Calculator JavaScript

javascript

function

calculation