Why is the result of the textbox disappearing after the click?

Navigation
4

I'm studying Javascript for a YouTube videotape I did the same video, but when I click on Calculate the result appears and already disappears in less than 1 second, when in fact it should stay in the field text.

Below is the html and js. Note: Javascript is in separate file. 

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <title>Javascript aula 03</title>
        <link rel="stylesheet" href="_css/estilo.css">
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="csss/estilo.css">
        <script src="js/aula07.js"></script>
    </head>

    <body>
        <img src="imagens/imc.jpg" height="180px" width="200px">
        <form id="formulario">
            <fieldset style="width:20%;">
                <legend>Cálculo do IMC</legend>

            <span>  
              <label for="kilos"> Kilos &nbsp;&nbsp;</label>
              <input type="text" name="kilos"><br>
            </span>

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

            <span>
              <label for="centimetros"> Cm &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <input type="text" name="centimetros"><br>
            </span>

            <span>
              <label for="imc"> IMC: &nbsp;&nbsp;</label>
              <input type="text" name="imc" disabled="disabled"><br>
            </span>

            <span>
              <a href="" onclick="calcularIMC();"> Calcular </a>
            </span> 
            </fieldset>
        </form>
    </body>

</html>

function calcularIMC() {
    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);
}
    
asked by anonymous 11.10.2015 / 20:14

3 answers

6

Your problem is the href attribute of the element responsible for the call of the calcularIMC() function. Here is the element that is causing this behavior: 

<a href="" onclick="calcularIMC();"> Calcular </a>

The href="" attribute will cause your page to be reloaded.

If you really want to use the a tag to invoke the function, use the attribute as% with%. As in the example below: 

<a href="javascript:void(0)" onclick="calcularIMC();">Calcular</a>

You can also use some other element, such as a button: 

<button type="button" onclick="calcularIMC();">Calcular</button>

Another detail worth checking out, as exposed by href="javascript:void(0)" , is that you have an error of syntax in: 

formulario.imc.value = imc;.toFixed(2);

For code to run smoothly, use: 

formulario.imc.value = imc.toFixed(2);
    
11.10.2015 / 20:26
2

You can include the value "#" for the href attribute. That way the page will not be reloaded when you click the link to recalculate. Taking advantage of this, the method that calculates has a syntax error on the last line ( form.imc.value = imc; .toFixed (2);) . That ";" after imc causes the method to be unrecognized. To fix it just remove it form.imc.value = imc.toFixed (2); . Below is a working example: 

function calcularIMC() {
    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);
}
<html lang="pt-br">

    <head>
        <title>Javascript aula 03</title>
        <link rel="stylesheet" href="_css/estilo.css">
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="csss/estilo.css">
        <script src="js/aula07.js"></script>
    </head>

    <body>
        <form id="formulario">
            <fieldset style="width:20%;">
            <legend>Cálculo do IMC</legend>

            <span>  
              <label for="kilos"> Kilos &nbsp;&nbsp;</label>
              <input type="text" name="kilos"><br>
            </span>

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

            <span>
              <label for="centimetros"> Cm &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <input type="text" name="centimetros"><br>
            </span>

            <span>
              <label for="imc"> IMC: &nbsp;&nbsp;</label>
              <input type="text" name="imc" disabled="disabled"><br>
            </span>

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

</html>
    
11.10.2015 / 20:53
2

Where is 

<a href="" onclick="calcularIMC();"> Calcular </a>

Add the '#' caracatere in href, to prevent it from updating the page, so that it looks like this: 

<a href="#" onclick="calcularIMC();"> Calcular </a>
    
11.10.2015 / 21:12
Use of setters in the constructor Rename batch files using Windows Power Shell