Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Captura de dados simples com uma função

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Crie suas próprias funcionalidades e atividade Funções

por Maria Eugênia Ferreira
| 76k xp | 86 posts

Olá. Estou fazendo um exercício da #quarentenaDev e estou tendo dificuldades para entender a lógica. Gostaria de capturar peso e altura via input.value e calcular o IMC apertando um botão. Alguma ideia do pq algo está errado? O calculo do IMC não funciona. Código abaixo também pode ser visto aqui: https://codepen.io/Phantome/pen/mdeywgx

Código html


<h2>Descubra o seu IMC </h2>

<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

<ul>

  <li label for="inputNome"> Nome: </label>
  <input id = "inputNome" placeholder = "Insira seu nome aqui"></li>

  <li label for = inputPeso>Peso:</label>
<input id=inputPeso placeHolder = "seu peso em Kg"></li>

  <li label for = inputAltura>Altura:</label>
<input id = "inputAltura" placeholder = "Altura, (use "." em vez de ",")"></li>

</ul>

<button id = "botaoCalcular" onclick = calculaImc()>Calcular</button>

<h2>Tabela de Referência</h2>

Entre 25 e 29,9     - Sobrepeso<br>
Entre 30 e 34,9     - Obesidade grau 1<br>
Entre 35 e 39,9     - Obesidade grau 2<br>
Mais do que 40     - Obesidade grau 3

<h2> Seu resultado</h2>

  <p id = avaliacaoImc>Seu imc será calculado com os valores de peso e altura informados.</p>

<h2>Descubra o seu IMC </h2>

<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

<ul>

  <li label for="inputNome"> Nome: </label>
  <input id = "inputNome" placeholder = "Insira seu nome aqui"></li>

  <li label for = inputPeso>Peso:</label>
<input id=inputPeso placeHolder = "seu peso em Kg"></li>

  <li label for = inputAltura>Altura:</label>
<input id = "inputAltura" placeholder = "Altura, (use "." em vez de ",")"></li>

</ul>

<button id = "botaoCalcular" onclick = calculaImc()>Calcular</button>

<h2>Tabela de Referência</h2>

Entre 25 e 29,9     - Sobrepeso<br>
Entre 30 e 34,9     - Obesidade grau 1<br>
Entre 35 e 39,9     - Obesidade grau 2<br>
Mais do que 40     - Obesidade grau 3

<h2> Seu resultado</h2>

  <p id = avaliacaoImc>Seu imc será calculado com os valores de peso e altura informados.</p>

Código Javascript

var peso = inputPeso.value;
var altura = inputAltura.value;
var nome = inputNome.value;

function calculaImc(peso,altura){
  var imc = (peso/altura*altura);

  return imc;

}

    var imc = calculaImc(peso,altura);

avaliacaoImc.innerHTML = "O imc calculado é de " + imc;
3 respostas
solução!
por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Oi Maria, tudo bem? Vamos por partes:

1- Aqui você precisa colocar as "" no inputPeso:

<input id=inputPeso placeHolder = "seu peso em Kg"></li>

2- Aqui você precisa trocar as " internas por ': Está assim:

<input id = "inputAltura" placeholder = "Altura, (use "." em vez de ",")"></li>

Deve ficar assim:

<input id = "inputAltura" placeholder = "Altura, (use '.' em vez de ',')"></li>

3- Aqui você precisa colocar as "" no avaliacaoIMC:

<p id = avaliacaoImc>Seu imc será calculado com os valores de peso e altura informados.</p>

4- Aqui precisa colocar as aspas no calculaIMC():

Está assim:

<button id = "botaoCalcular" onclick = calculaImc()>Calcular</button>

Fica assim:

<button id = "botaoCalcular" onclick = "calculaImc()">Calcular</button>

5- No seu script você precisa fazer as seguintes correções: Está assim:

var peso = inputPeso.value;
var altura = inputAltura.value;
var nome = inputNome.value;

Deve ficar assim:

var peso = document.getElementById("inputPeso").value;
var altura = document.getElementById("inputAltura").value;
var nome = document.getElementById("inputNome").value;

Pois precisa informar ao Script que ele precisa buscar o elemento pela tag, infelizmente isso não funciona como o XAML do C# e você não pode simplesmente passar o id do elemento com se ele ja fosse uma variavel (uma pena facilitaria a vida para nós).

6- Mudar a assinatura do método calcula para ficar assim:

function calculaImc(){

Pois você já pega os valores do html com o .value e não passa pelo metodo.

7- Deve colocar o document.getElementById aqui tmb:

document.getElementById("avaliacaoImc").innerHTML = "O imc calculado é de " + imc;

8- Deve colocar parênteses na multiplicação da altura: Está assim: 

var imc = (peso/altura*altura);

deve ficar assim:

var imc = (peso/(altura*altura));

9- Por fim e mais importante, deve colocar tudo o que está no seu script dentro do método calcula, caso contrario ele nunca irá calcular ou exibir corretamente os valores, pois da forma como está os valores são pegos assim que a pagina carrega (e por isso sempre estão em branco) então como não são atribuidos em outro momento ele não poderá calcular corretamente.

function calculaImc(peso,altura){

var peso = document.getElementById("inputPeso").value;
var altura = document.getElementById("inputAltura").value;
var nome = document.getElementById("inputNome").value;
  var imc = (peso/(altura*altura));
    console.log(imc);
document.getElementById("avaliacaoImc").innerHTML = "O imc calculado é de " + imc;

}

O resultado final é esse:

<html>
<body>

<h2>Descubra o seu IMC </h2>

<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

<ul>

  <li label for="inputNome"> Nome: </label>
  <input id = "inputNome" placeholder = "Insira seu nome aqui"></li>

  <li label for = 'inputPeso'>Peso:</label>
<input id='inputPeso' placeHolder = "seu peso em Kg"></li>

  <li label for = 'inputAltura'>Altura:</label>
<input id = "inputAltura" placeholder = "Altura, (use '.' em vez de ',')"></li>

</ul>

<button id = "botaoCalcular" onclick = 'calculaImc()'>Calcular</button>

<h2>Tabela de Referência</h2>

Entre 25 e 29,9     - Sobrepeso<br>
Entre 30 e 34,9     - Obesidade grau 1<br>
Entre 35 e 39,9     - Obesidade grau 2<br>
Mais do que 40     - Obesidade grau 3

<h2> Seu resultado</h2>

  <p id = 'avaliacaoImc'>Seu imc será calculado com os valores de peso e altura informados.</p>





</body>

<script>


function calculaImc(peso,altura){

var peso = document.getElementById("inputPeso").value;
var altura = document.getElementById("inputAltura").value;
var nome = document.getElementById("inputNome").value;
  var imc = (peso/(altura*altura));
    console.log(imc);
document.getElementById("avaliacaoImc").innerHTML = "O imc calculado é de " + imc;

}



</script>
</html>

Testei aqui e está funcionando

por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Se precisar tirar duvidas especificas sobre cada parte, permaneço à disposição! :)

por Maria Eugênia Ferreira
| 76k xp | 86 posts

Obrigada @Leonardo, me ajudou bastante! O problema muitas vezes é a falta de atenção mesmo.