Body Mass Index Calculation (BMI)

Asked

Viewed 11,910 times

1

My html code is as follows::

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Stric//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScript Aula 07</title>       
    <script type="text/javascript" src="js/aula07.js"></script>
    <style type="text/css">
    img, table { width:165px; }
    fieldset { width:140px; }
    label { display:block; float:left;}
    label, input {width:68px; margin:3px 0; }
    th, td {border:1px solid #ccc; font-size:0.8em;}
    </style>
</head>
<body>
    <img src="img/imc.png" alt="imc"/>
    <form id="formulario">
        <fieldset>
            <legend>Cálculo do IMC</legend>

            <label for="kilos">Quilos:</label>
            <input type="text" name="quilos"/>          

            <label for="metros">Metros:</label>
            <input type="text" name="metros"/>

            <label for="centimetros">Cm:</label>
            <input type="text" name="centimetros"/>

            <label for="imc">IMC:</label>
            <input type="text" name="imc" disabled="disabled"/>

            <a href="#" onclick="calcularIMC()">Calcular</a>
            </fieldset>
        </form>
    </body>
</html>

And Javascript is:

calcularIMC = function (){
var formulario = document.getElementById("formulario");

var kilos = +formulario.kilos.value;    
var metros = +formulario.metros.value;  
var centimetros = +formulario.centimetros.value;

var altura = (metros*100 + centimetros)/100;    
var imc = kilos / (altura * altura);    
formulario.imc.value = imc.toFixed(2);
}

When using Notepad++, the HTML page does not seem to be "calling" Javascript, causing no results to appear in the IMC field. Grateful to those who can help.

javascript html css
  • 1

    Make sure your <script type="text/javascript" src="js/aula07.js"></script> has the correct path to the file containing the IMC calculation

  • A good way to see if the js file is being loaded correctly is to go to the source of the page (View page source) and click on src="js/aula07.js". If you open a tab in your browser with your js document it is because it is loading well

  • 1

    Friend, your code is working, see it working here, must be the script path: <script type="text/javascript" src="js/aula07.js"></script> that is incorrect as quoted @Cesarmiguel. Check the path.

  • Your script has only what you put here or has more code?

  • Thanks, guys, I got it sorted.

  • @sscarvalho the answer accepted is the solution of the problem? If it is not can answer you. So it is more useful for those who see this question and have similar problem.

  • It’s not really about the doubt, I’ll just comment with that link because your BMI formula has gotten really weird for me.

Show 2 more comments

1 answer

1


Hello, the script is loaded correctly. However, if you open your browser console (shortcut: F12 for most of them), you will see that an execution error occurs, which prevents your run-away function.

With the console open, try clicking the calculate button, and you will have clues to where your error is.

Just to clarify, it is necessary to exchange:

var kilos = +formulario.kilos.value;

For:

var kilos = +formulario.quilos.value;

I hope it helps! Hugs!

  • And (not error related) it is necessary to correct the "for" of the Abels! They always refer to Ids, not Ames!

  • Thank you very much, @Rui Pimentel, but we didn’t have to delete the "+", just change "kilos" for "kilos". As for "for", I’m still too "raw" to understand these details rsrs

  • Not at all! Interesting, what do you use it for? : ) I’ve never seen it! And as for "for", Labels serve basically to increase the click area that leads to the specified element (via ID, in "for"). Names only serve for this type of Forms navigation you have done in Javascript, and also for retrieval of the fields there on the server side; all parameters of the HTTP request are identified by Names, and not by Ids! :)

  • 1

    "+" cast the value for number.

  • Living and learning :D changed the answer, to be closer than the OP wanted, so.

  • I’m following a step-by-step video, and in it is said to put this "+", but I can’t remember the reason even if it was informed. Unfortunately I have not yet reached the level of criticizing my learning, I’m just "swallowing the concepts" rsrs

  • Ah, just now that I’ve seen it, @Moykn, that’s right, thank you!

Show 2 more comments

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.