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

calculo icm com informações via input

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Melhorando a usabilidade

por Vitor Sobral do Couto
| 22.7k xp | 23 posts

Boa noite. Estou tentando ajustar o código do sistema que efetua calculo de icm com as informações do usuário, antes as informações eram informadas por prompt. A interface está pronta, e o botão chama a funçao de calculo, assim como a exibiçao de resultados. Porém, ele nao esta reconhecendo os inputs. Como devo identificar no codigo para que as funçoes reconhecam os valores dos inputs? Segue codigo atual abaixo:

  • html

    <!DOCTYPE html>
  <html lang="pt-br">
      <meta charset="UTF-8">
      <head>
          <link rel="stylesheet" href="reset.css">
          <link rel="stylesheet" href="style.css">
          <title>Cálculo de IMC</title>
      </head>
      <body>
          <div class="infos">
              <div class="titulo">
                  <h1>- Calculo de ICM -</h1>
              </div>
              <p><strong>* </strong>Insira seu primeiro nome:</p><input id="campo1"></br>
              <p><strong>* </strong>Insira seu peso(Ex: se "<strong>84,5kg</strong>", coloque "<strong>84.5</strong>"):</p><input id="campo2"></br>
              <p><strong>* </strong>Insira sua altura(Ex: se possui "<strong>1,70m</strong>", coloque "<strong>1.70</strong>"):</p><input id="campo3"></br>
          </div>
          <div class="botao">
              <button><p>>> Calcular! <<</p></button>
          </div>
          <script>
              function imprimeFrase(frase){
                  document.write(frase);
              }

              function bemVindo(){
                  alert("Seja bem-vindo, usuário! Através desta tela você conseguirá calcular seu IMC!")
              }

              //função para pular linha. para usar basta digitar "pulaLinha()"
              function pulaLinha(){
                  imprimeFrase("<br>");
              }

              bemVindo();
              let nome = document.querySelector("campo1");
              let peso = document.querySelector("campo2");
              let altura = document.querySelector("campo3");

              //função de calculo do IMC. para usar basta digitar "calculoIMC("var peso, var altura")"
              function calculoIMC (){
                  var imc = peso.value / (altura.value * altura.value);
                  return imc;
              }

              function alertaResultados(nome, peso, altura){
                  alert(nome + ", segue o valor de suas medidas, junto do valor final do seu IMC!");
                  pulaLinha();
                  alert("Seu peso atual é de " + peso +"Kg.");
                  pulaLinha();
                  alert("Sua altura atual é de " + altura +" metros.");
                  pulaLinha();
              }

              //função que calcula o IMC e imprime o valor, junto do recomendado.
              //Primeiramente vai imprimir o peso e altura em tela. Em seguida irá
              //salvar em uma variavel o calculo do IMC para que seja possível salvar em tela.
              //e por final é feito uma comparação se o usuário deve ou não ir no médico.
              function resultadoIMC(nome, peso, altura){
                  alertaResultados(nome, peso, altura);
                  var valorIMC = calculoIMC (peso, altura); 
                  alert("O IMC  atual é de " + valorIMC +".");
                  pulaLinha();
                  if(valorIMC <= 18.5 ){
                      imprimeFrase("Você precisa cuidar da saude. Recomendo que procure um médico!");
                  } if (valorIMC > 18.5 && valorIMC <=35){
                      imprimeFrase("Você possui o IMC dentro da média. Mantenha seus hábitos!");
                  } if (valorIMC > 35){
                      imprimeFrase("Você está acima da média, Recomendo que procure um médico!");
                  }
              }

              let button = document.querySelector("button");
              button.onclick = resultadoIMC;
          </script>
          <main>
          </main>
          <footer>
          </footer>
      </body>
  </html>

  • css ` .infos{ text-align: left; margin-left: 15px; margin-top: 15px; }

.titulo{ margin-bottom: 15px; font-style: bold; font-size: 20px; }

p{ margin-bottom: 5px; }

input{ margin-bottom: 18px; width: 60px; }

.botao{ text-align: left; margin-left: 15px; margin-top: 5px;

}

.botao p{ text-align: center; margin-top: 5px; font-style: bold; font-size: 18px; } `

4 respostas
solução!
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Vitor

No seu código você está utilizando querySelector e ele é uma função que busca qualquer elemento dentro do HTML, só que pra isso você precisa de adicionar alguns detalhes dependendo da propriedade que você quer buscar.

  • Para ID você irá utilizar #
    • document.querySelector("#campo1");
  • Para Elemento você irá utilizar o nome do elemento
    • document.querySelector("input");
  • Para Class você precisa utilizar o . (ponto)
    • document.querySelector(".nomeDaClasse");

Ai no seu código ficaria assim:

<input id="campo1">
<script>
    document.querySelector("#campo1");
</script>

Mas também tem a opção de buscar direto por ID com a função getElementById, assim:

<input id="campo1">
<script>
    document.getElementById("campo1");
</script>
por Vitor Sobral do Couto
| 22.7k xp | 23 posts

Olá Guilherme! Obrigado pela ajuda, eu consegui ajustar o meu código com esta informação e agora está funcional. Porém, estou tentando entender do porque a tela fica branca após efetuar o processo. Saberia me dizer por que? O código CSS se mantém o mesmo acima.

<!DOCTYPE html>
    <html lang="pt-br">
        <meta charset="UTF-8">
        <head>
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="style.css">
            <title>Cálculo de IMC</title>
        </head>
        <body>
            <div class="infos">
                <div class="titulo">
                    <h1>- Calculo de ICM -</h1>
                </div>
                <p><strong>* </strong>Insira seu primeiro nome:</p><input id="campo1"></br>
                <p><strong>* </strong>Insira seu peso(Ex: se "<strong>84,5kg</strong>", coloque "<strong>84.5</strong>"):</p><input id="campo2"></br>
                <p><strong>* </strong>Insira sua altura(Ex: se possui "<strong>1,70m</strong>", coloque "<strong>1.70</strong>"):</p><input id="campo3"></br>
            </div>
            <div class="botao">
                <button><p>>> Calcular! <<</p></button>
            </div>
            <script>
                function imprimeFrase(frase){
                    document.write(frase);
                }

                function bemVindo(){
                    alert("Seja bem-vindo, usuário! Através desta tela você conseguirá calcular seu IMC!");
                }

                function bemVindo2(){
                    alert("Através desta tela você conseguirá calcular seu IMC!");
                }

                //função para pular linha. para usar basta digitar "pulaLinha()"
                function pulaLinha(){
                    imprimeFrase("<br>");
                }

                bemVindo();
                let nome = document.getElementById("campo1");
                let peso = document.getElementById("campo2");
                let altura = document.getElementById("campo3");

                //função de calculo do IMC. para usar basta digitar "calculoIMC("var peso, var altura")"
                function calculoIMC (){
                    var imc = peso.value / (altura.value * altura.value);
                    return imc;
                }

                function alertaResultados(){
                    alert(nome.value + ", segue o valor de suas medidas, junto do valor final do seu IMC!");
                    pulaLinha();
                    alert("Seu peso atual é de " + peso.value +"Kg.");
                    pulaLinha();
                    alert("Sua altura atual é de " + altura.value +" metros.");
                    pulaLinha();
                }

                //função que calcula o IMC e imprime o valor, junto do recomendado.
                //Primeiramente vai imprimir o peso e altura em tela. Em seguida irá
                //salvar em uma variavel o calculo do IMC para que seja possível salvar em tela.
                //e por final é feito uma comparação se o usuário deve ou não ir no médico.
                function resultadoIMC(nome, peso, altura){
                    alertaResultados(nome, peso, altura);
                    var valorIMC = calculoIMC (peso, altura); 
                    alert("O IMC atual é de " + valorIMC +".");
                    pulaLinha();
                    if(valorIMC <= 18.5 ){
                        alert("Você precisa cuidar da saude. Recomendo que procure um médico!");
                    } if (valorIMC > 18.5 && valorIMC <=35){
                        alert("Você possui o IMC dentro da média. Mantenha seus hábitos!");
                    } if (valorIMC > 35){
                        alert("Você está acima da média, Recomendo que procure um médico!");
                    }
                }

                let button = document.querySelector("button");
                button.onclick = resultadoIMC;
            </script>
            <main>
            </main>
            <footer>
            </footer>
        </body>
    </html>
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Vitor

Fica branco porque você utiliza o pulaLinha() e ele tem o document.write(frase);.

Quando utilizamos o document.write ele sobrescreve tudo que está no body do html.

Basta retirar o pulaLinha que não irá acontecer mais isso.

Como você está utilizando o alert não é necessário o <br>.

por Vitor Sobral do Couto
| 22.7k xp | 23 posts

Novamente obrigado Guilherme. Eu não havia me lembrado desta função. Muito obrigado!