为什么我的 JavaScript BMI 计算器不工作？ 找不到错误

Question

I have been for a few days now trying to program a basic BMI calculator, but something seems to be wrong. Tried the console, read a thousand posts here but cannot find my error. It just doesn't show any result. I would really appreciate your help.

This is my 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>

Answer 1

Another way to fix it would be to change the form to a div (maybe a good idea as I think forms are more for submitting information to an api etc..)

Also I changed the .innrerHtml to .innerText as you only want to pass text to the element rather than more html elements

 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>

Answer 2

The button submits the form, which as a result reloads the page (it's a quite irritating default if you ask me). You need to manually prevent this by adding function printImc(event) { event.preventDefault();

As pointed out by @NishantSingh, another solution is to define type="button" on the button to prevent reloading the page (I didn't know that).

Second error, .addEventListener(onclick) should be .addEventListener("click") .

Third error (more like a warning because it works nonetheless) : as pointed out by @jkoestinger, .tofixed() returns a string (!). (altura * altura).toFixed(2) is a string, and then you divide a number with a string, which shouldn't work... but still does, probably because JS automatically casts "26.8" to 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>

Answer 3

Below is your solution:

 <!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>

Your code is good, a few mistakes are there like incorrect event listener, as well as the button type, is missing.