Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Tentei criar um programa que calcula o IMC mas ele não funciona.

Eu fiz esse programa logo depois da minha primeira aula de lógica de programação , eu gostaria que alguém me ajudasse nesse código. Como eu faço para fazer isso funcionar?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcular IMC</title>
</head>
<body>

    <h3>Informe seu nome:</h3>
    <input type="nome">
    <h3>Informe sua altura:</h3>          
    <input type="altura">
    <h3>Informe o seu peso:</h3>
    <input type="peso">
    <button>Calcular IMC</button>

    <script>

       function calculaImc(altura, peso) {

         return  peso / (altura * altura);

       }

        var nome = document.querySelector("nome");
        var altura = document.querySelector("altura");
        var peso = document.querySelector("peso");

        var imc = caculaImc(alturaInformada, pesoInformado);

        document.write(nome + ", O seu IMC é " + "<strong>" + imc + "</strong>");

        var button = document.querySelector("button");
        button.onclick = calculaImc;

    </script>
</body>
</html>
4 respostas
solução!

Olá Cleison, tudo bem com você?

Tem alguns errinhos, veja:

var imc = caculaImc(alturaInformada, pesoInformado);

Aqui era para ser calculaImc mas temos algumas questões aqui, não existe essa 2 variáveis chamadas: alturaInformada e pesoInformado, no caso essa parte queremos pegar do html

E ai a gente precisa alterar um pouco o html, a propriedade type do input se refere ao formato dos dados, então temos text, password, email, etc...

O que você colocou na verdade é a propriedade name, então ficaria assim:

    <h3>Informe seu nome:</h3>
    <input type="text" name="nome" >
    <h3>Informe sua altura:</h3>          
    <input type="text" name="altura">
    <h3>Informe o seu peso:</h3>
    <input type="text" name="peso">
    <button>Calcular IMC</button>

E para capturar no javascript:

var nome = document.querySelector("input[name='nome']");
var altura = document.querySelector("input[name='altura']");
var peso = document.querySelector("input[name='peso']");

Ou seja, queremos capturar um input e passamos dentro dos colchetes a propriedade ( name) e o valor :)

E dado que estamos pegando elementos html podemos mudar a função de cálculo do IMC para:

function calculaImc() {
         var resultado =   peso.value / (altura.value * altura.value);
         alert(resultado)
}

Então, não teremos parâmetros pois já capturamos os elementos, e precisamos adicionar o .value para indicar que queremos o conteúdo que está dentro do input

E ai sim, podemos ter:

var button = document.querySelector("button");
button.onclick = calculaImc;

Conseguiu Compreender?

Qualquer coisa estou à disposição!

Abraços e Bons Estudos :)

Sim, ficou ótimo desse jeito que você fez. Eu testei aqui e ele mostrou o alerto com o resultado mas tem uma coisa que me deixou com uma dúvida! Eu aprendi que no JavaScript você pode usar aspas de duas formas, assim ( "") ou ('') assim.

var nome = document.querySelector("input[name='nome']");

Nesse código eu notei que você escreveu com duas aspas diferentes, precisa usar essas duas ou tanto faz?

Opa Cleison, tudo certo?

Então, podemos utilizar tanto aspas simples, quanto aspas duplas, para escrever códigos em javacript

Porém, quando queremos uma aspa no trecho, ai temos que misturar, por exemplo:

console.log("input[name='idade']")
>> input[name='idade']

ou:

console.log('input[name="idade"]')
>> input[name="idade"]

A lógica de não poder utilizar duas vezes a mesma, é que o começo da segundas aspas, vai ser interpretada como o final da primeira, e ai terremos problema :)

console.log('input[name='idade']')
>> Uncaught SyntaxError: missing ) after argument list

Teoricamente o que temos é:

  • 'input[name='
  • idade
  • ']'

Então para fugir disso, nós fazemos essa inversão e utilizamos outro tipo internamente :)

Abraços!

Mano sua solução me ajudou de mais, ótima explicação! O legal foi que além de você tirar as minhas dúvidas, você me ajudou a modificar o meu programa e deixar do jeito que eu estava querendo fazer. Eu queria que ele escrevesse o resultado ao invés de enviar um alerta. Eu usei a solução que você me deu para incrementar alguns códigos.

<meta charset="UTF-8">

<h3>Informe seu nome:</h3>
    <input type="text" name="nome" >
    <h3>Informe sua altura:</h3>          
    <input type="text" name="altura">
    <h3>Informe o seu peso:</h3>
    <input type="text" name="peso">
    <br><br>
    <button>Calcular IMC</button>

<script>

        function mostra(frase) {

        document.write(frase);
}

        function mostra(frase) { document.write(frase); }

    var nome = document.querySelector("input[name='nome']");
    var altura = document.querySelector("input[name='altura']");
    var peso = document.querySelector("input[name='peso']");

function calculaImc() {
         var resultado =   peso.value / (altura.value * altura.value);
         //alert("Seu IMC é " + resultado);
        mostra("<h2>" + nome.value + ", O seu IMC é " + "<strong>" + resultado + "</strong></h2>");

         if(resultado < 18.5) {

        mostra("Você está abaixo do recomendado")
}

        if(resultado > 35) {

        mostra("Você está acima do recomendado")
}

        if(resultado >= 18.5 && resultado <= 35) {

        mostra("<h3>Você está abaixo do recomendado.<h3>");

}

}
        var button = document.querySelector("button");
        button.onclick = calculaImc;

</script>