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

Colocando em funções

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Arrays, Loop e Estilos e atividade Replicando a validação e o cálculo do IMC para todos os pacientes

por Bruna Guimarães de Sousa e Silva
| 92.1k xp | 57 posts

Eu tentei colocar partes do código em funções, para facilitar a legibilidade. Mas não funciona. Por quê? Segue o html e o JS: 

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" id="primeiro-paciente">
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" id="segundo-paciente">
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" id="terceiro-paciente">
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" id="quarto-paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" id="quinto-paciente">
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>


        <script src="js/principal.js"></script>

    </body>
</html>

var pacientes = document.querySelectorAll(".paciente");

function verificaPesoEAltura() {
  var pesoValido = true;
  var alturaValida = true;

  if(peso <= 0 || peso >= 250) {
    pesoValido = false;
    tdPeso.textContent = ("Peso inválido!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var peso = tdPeso.textContent
  }

  if(altura <= 0 || altura >= 3.00) {
    alturaValida = false;
    tdAltura.textContent = ("Altura inválida!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var altura = tdPeso.textContent
  }

  if(pesoValido && alturaValida) {
    tdImc.textContent = calculoImc.toFixed(2);
  }
}

function calculaImc() {
  var tdPeso = paciente.querySelector(".info-peso");
  var tdAltura = paciente.querySelector(".info-altura");
  var peso = tdPeso.textContent;
  var altura = tdAltura.textContent;

  var tdImc = paciente.querySelector(".info-imc");
  var calculoImc = peso / (altura * altura);
}

function mostraImc () {
    for(var i = 0; i < pacientes.length; i++) {

    var paciente = pacientes[i];

    calculaImc();

    verificaPesoEAltura();

  }
}

mostraImc();
6 respostas
por Carlos Ruesta
| 297.6k xp | 66 posts
Diretor de TI

Olá Bruna, esses códigos estão no arquivo?

js/principal.js

por Bruna Guimarães de Sousa e Silva
| 92.1k xp | 57 posts

Oi, Carlos. Estão sim.

solução!
por Carlos Ruesta
| 297.6k xp | 66 posts
Diretor de TI

Bruna, no caso, você precisa tomar cuidado com o escopo das variávies utilizadas programa e nas funções:

Por exemplo: a variável "pacientes" é global e pode ser vista por todas as funções.

Não entanto, na função calculaImc você utiliza uma variável paciente que não foi declarada. No caso ela deve ser passada como parâmetro da função ao chamada desde o método calculaImc()

Acredito que os problemas estão relacionados ao escopo e organização do código.

por Bruna Guimarães de Sousa e Silva
| 92.1k xp | 57 posts

Muito obrigada, Carlos! Era isso mesmo. Eu pensava que o leitor só guardava a função e deixava para interpretá-la quando fosse chamada, mas agora já declarei as variáveis fora e deu certo.

var pacientes = document.querySelectorAll(".paciente");

var paciente;
var tdPeso;
var tdAltura;
var peso;
var altura;
var tdImc;
var calculoImc;
var pesoValido;
var alturaValida;

function calculaImc() {

  tdPeso = paciente.querySelector(".info-peso");
  tdAltura = paciente.querySelector(".info-altura");
  peso = tdPeso.textContent;
  altura = tdAltura.textContent;

  tdImc = paciente.querySelector(".info-imc");
  calculoImc = peso / (altura * altura);

}

function verificaPesoAltura() {

  pesoValido = true;
  alturaValida = true;

  if(peso <= 0 || peso >= 250) {
    pesoValido = false;
    tdPeso.textContent = ("Peso inválido!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var peso = tdPeso.textContent
  }

  if(altura <= 0 || altura >= 3.00) {
    alturaValida = false;
    tdAltura.textContent = ("Altura inválida!"); //é necessário modificar o textContent diretamente na var do querySelector e não na var altura = tdPeso.textContent
  }

  if(pesoValido && alturaValida) {
    tdImc.textContent = calculoImc.toFixed(2);
  }
}

function mostraImc() {
  for(var i = 0; i < pacientes.length; i++) {

    paciente = pacientes[i];

    calculaImc();

    verificaPesoAltura();
  }
}

mostraImc();
por Carlos Ruesta
| 297.6k xp | 66 posts
Diretor de TI

Excelente!

por Victória César
| 93.4k xp | 47 posts

Ficou bem melhor em funções rs, vou tentar implementar no meu também, depois venho aqui vê se acertei ;)