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>