BMI计算器 JavaScript

Question

我对 JavaScript 很陌生，但我尝试用一些小项目挑战自己。 每当我遇到困难时，我都会用谷歌搜索问题并尝试以这种方式解决它，但这一次我无法弄清楚为什么我的代码无法正常工作。

 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 function 时，您只是缺少右括号。

对于未经训练的人来说，第二个问题不太明显。 在您的 JavaScript 中，您调用document.getElementById()两次，并尝试将 output 两次都转换为Number 。 document.getElementById的 output 是一个Element object。 它试图将 object 本身转换为一个数字，该数字返回 NaN（不是数字）。 要解决此问题，请在需要从中获取字符串值的每个document.getElementById()之后添加.value 。 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>