為什么我的 JavaScript BMI 計算器不工作？ 找不到錯誤
[英]Why is my JavaScript BMI Calculator not working? Cannot find the error
問題描述
幾天來，我一直在嘗試編寫基本的 BMI 計算器，但似乎出了點問題。 嘗試了控制台，在這里閱讀了一千篇文章，但找不到我的錯誤。 它只是沒有顯示任何結果。 我將衷心感謝您的幫助。
這是我的 HTML：
function printImc() { var peso = parseFloat(document.getElementById("peso").value); var altura = parseFloat(document.getElementById("altura").value); var imc = peso / (altura * altura).toFixed(2); document.getElementById("h2").innerHTML = imc; var indice = ""; if (imc <= 18.5) { indice = "Tienes bajo peso"; } else if (imc > 18.6 && imc <= 24.9) { indice = "Tienes un peso saludable"; } else if (imc > 25) { indice = "Tienes sobrepeso"; } document.getElementById("resultado").innerHTML = indice; } document.getElementById("button").addEventListener(onclick, printImc);
<div id="container"> <form id="form"> <label for="peso">Peso<input type="text" id="peso" class="data" placeholder="60 kg"></label> <label for="altura">Altura<input type="text" id="altura" class="data" placeholder="1.70 mts"></label> <button id="button">Ok</button> </form> <div id="indice"> <h3>Tu índice de masa corporal es:</h3> <h2 id="h2">0</h2> </div> <div id="resultado"> </div> </div> <script type="text/javascript" src="calculadoramasacorporal.js"></script>
3 個解決方案
解決方案1
1 2021-07-16 09:34:34
修復它的另一種方法是將表單更改為 div（可能是個好主意，因為我認為表單更多用於向 api 等提交信息。）
此外，我將 .innrerHtml 更改為 .innerText 因為您只想將文本傳遞給元素而不是更多的 html 元素
function printImc() { var peso = document.getElementById('peso').value var altura = document.getElementById('altura').value var imc = (peso / (altura * altura)).toFixed(2) console.log(imc) var indice = "" if (imc <= 18.5) { indice = "Tienes bajo peso" } else if (imc > 18.6 && imc <= 24.9) { indice = "Tienes un peso saludable" } else if (imc > 25) { indice = "Tienes sobrepeso" } document.getElementById('h2').innerText = imc document.getElementById('resultado').innerText = indice } document.getElementById('button').addEventListener('click', printImc)
<div id="container"> <div id="form"> <label for="peso">Peso<input type="text" id="peso" class="data" placeholder="60 kg"></label> <label for="altura">Altura<input type="text" id="altura" class="data" placeholder="1.70 mts"></label> <button id="button">Ok</button> </div> <div id="indice"> <h3>Tu índice de masa corporal es:</h3> <h2 id="h2">0</h2> </div> <div id="resultado"> </div> </div>
解決方案2
0 已采納 2021-07-16 08:58:55
該按鈕提交表單，結果會重新加載頁面（如果您問我，這是一個非常令人討厭的默認設置）。 您需要通過添加function printImc(event) { event.preventDefault();來手動防止這種情況function printImc(event) { event.preventDefault();
正如@NishantSingh 所指出的，另一種解決方案是在type="button"上定義type="button"以防止重新加載頁面（我不知道）。
第二個錯誤， .addEventListener(onclick)應該是.addEventListener("click") 。
第三個錯誤（更像是警告，因為它仍然有效）：正如@jkoestinger 所指出的， .tofixed()返回一個字符串 (!)。 (altura * altura).toFixed(2)是一個字符串，然后你用一個字符串除以一個數字，這不應該工作......但仍然可以，可能是因為JS自動將"26.8"轉換為26.8 。
function printImc() { var peso = parseFloat(document.getElementById("peso").value); var altura = parseFloat(document.getElementById("altura").value); var imc = (peso / (altura * altura)).toFixed(2); document.getElementById("h2").innerHTML = imc; var indice = ""; if (imc <= 18.5) { indice = "Tienes bajo peso"; } else if (imc > 18.6 && imc <= 24.9) { indice = "Tienes un peso saludable"; } else { indice = "Tienes sobrepeso"; } document.getElementById("resultado").innerHTML = indice; } document.getElementById("button").addEventListener("click", printImc);
<div id="container"> <form id="form"> <label for="peso">Peso<input type="text" id="peso" class="data" placeholder="60 kg"></label> <label for="altura">Altura<input type="text" id="altura" class="data" placeholder="1.70 mts"></label> <button id="button" type="button">Ok</button> </form> <div id="indice"> <h3>Tu índice de masa corporal es:</h3> <h2 id="h2">0</h2> </div> <div id="resultado"> </div> </div> <script type="text/javascript" src="calculadoramasacorporal.js"></script>
解決方案3
0 2021-07-16 09:01:26
以下是您的解決方案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculadora de masa corporal</title> </head> <body> <div id="container"> <form id="form"> <label for="peso">Peso<input type="text" id="peso" class="data" placeholder="60 kg"></label> <label for="altura">Altura<input type="text" id="altura" class="data" placeholder="1.70 mts"></label> <button id="button" type="button">Ok</button> </form> <div id="indice"> <h3>Tu índice de masa corporal es:</h3> <h2 id="h2">0</h2> </div> <div id="resultado"> </div> </div> <script type="text/javascript"> function printImc(){ console.log("hello") var peso = parseFloat(document.getElementById("peso").value); var altura = parseFloat(document.getElementById("altura").value); var imc = peso / (altura * altura).toFixed(2); document.getElementById("h2").innerHTML = imc; var indice = ""; if (imc <= 18.5){ indice = "Tienes bajo peso"; } else if (imc > 18.6 && imc <= 24.9) { indice = "Tienes un peso saludable"; } else if (imc > 25) { indice = "Tienes sobrepeso"; } document.getElementById("resultado").innerHTML = indice; } document.getElementById("button").addEventListener("click", printImc); </script> </body> </html>
你的代碼很好，有一些錯誤，比如不正確的事件監聽器，以及按鈕類型丟失。
為什么我的 BMI 計算器顯示錯誤的 BMI？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.