4

Estou estudando Javascript por uma videoaula do YouTube a fiz igual o vídeo, mas quando clico em Calcular o resultado aparece e já some em menos de 1 segundo, quando na verdade ele deveria ficar no campo de texto.

Segue a baixo o html e o js.
Obs: O Javascript está em arquivo separado.

<!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);
}
2
  • O ideal é que você compartilhe um Exemplo Mínimo, Completo e Verificável.
    – Romulo
    Commented 11/10/2015 às 18:18
  • Além do que foi respondido pelo @Romulo, tem um erro de sintaxe aqui: formulario.imc.value = imc;.toFixed(2); também. Commented 11/10/2015 às 18:38

3 Respostas 3

6

O seu problema é o atributo href do elemento responsável pela chamada da função calcularIMC(). Segue o elemento que está causando esse comportamento:

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

O atributo href="" vai fazer com que sua página seja recarregada.

Se realmente quiser utilizar a tag a para invocar a função, utilize o atributo da seguinte maneira href="javascript:void(0)". Como no exemplo abaixo:

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

Você pode também utilizar um outro elemento qualquer, como por exemplo um botão:

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

Outro detalhe que vale a pena verificar, conforme exposto pelo renan, é que você possui um erro de sintaxe em:

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

Para o código executar sem problemas, utilize:

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

Você pode incluir o valor "#" para o atributo href. Dessa forma a página não será recarregada quando clicar no link para recalcular. Aproveitando, o método que calcula possui um erro de sintaxe na última linha (formulario.imc.value = imc;.toFixed(2);). Esse ";" após o imc faz com que o método não seja reconhecido. Para corrigir é só remove-lo formulario.imc.value = imc.toFixed(2);. Abaixo um exemplo funcional:

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

Onde está

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

acrescente o caracatere '#' no href, para evitar que ele atualize a página, de forma que fique assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .