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

Asked

Viewed 777 times

4

I’m studying Javascript for a Youtube video class I did like the video, but when I click Calculate the result appears and already disappears in less than 1 second, when in fact it should stay in the text field.

Follow the html and js below.
Note: Javascript is in a 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);
}
javascript

3 answers

6

Your problem is the attribute href of the person responsible for calling the function calcularIMC(). It follows the element that is causing this behavior:

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

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

If you really want to use the tag a to invoke the function, use the attribute as follows href="javascript:void(0)". As in the example below:

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

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

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

Another detail worth checking out, as explained by renan, is that you have a syntax error in:

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

For the code to run smoothly, use:

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

3

You can include the value "#" for the href attribute. This way the page will not be reloaded when you click on the link to recalculate. Taking advantage, the method that calculates has a syntax error in the last line (formulario.imc.value = imc;. toFixed(2);). This ";" after the BMI causes the method to be unrecognized. To correct just remove it formulario.imc.value = imc.toFixed(2);. Below is a functional 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>

2

Where is 

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

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

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

Browser other questions tagged javascript

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