3
respostas

Refiz todos os arquivos e não entendo porque não incluo o paciente

por Neita Leal de Mattos Santos
| 151.9k xp | 50 posts

index.html


 <!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">1.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="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" >
                            <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">
                            <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" >
                            <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>
        <section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class=" campo campo-medio">
        </div>
        <div class="grupo">
            <label for="altura">Altura:</label>
            <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="gordura">% de Gordura:</label>
            <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
        </div>
        <button id="add-paciente" class="bto botao-principal" type="submit">Adicionar</button>
       </form>
       </section
    </main>
    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js'></script>
    </body>
    </html>

calcula-imc.js

    var titulo = document.querySelector(".titulo");
titulo.textContent="Aparecida Nutricionista";        
var pacientes = document.querySelectorAll(".paciente");
for(var i= 0; i < pacientes.length ; i++){
var paciente = pacientes[i];
var tdPeso = paciente.querySelector(".info-peso");
var peso =tdPeso.textContent;
var tdAltura = paciente.querySelector(".info-altura");
var altura = tdAltura.textContent;
var tdImc= paciente.querySelector(".info-imc");

var pesoEhValido = true;
var alturaEhValida= true;

if(peso <= 0 || peso >= 1000){
    console.log("Peso inválido!");
    pesoEhValido= false;
    tdImc.textContent = "Peso inválido!";
    paciente.classList.add("paciente-invalido");
}
 if(altura <= 0|| altura >=3.00){
    console.log("Altura inválida!");
    alturaEhvalida= false;
    tdImc.texContent = "Altura inválida!";
   paciente.classList.add("paciente-invalido");
 }   
 if(alturaEhValida && pesoEhValido){
    var imc = calculaImc( peso,altura);
    tdImc.textContent =imc;
 }
}
function calculaImc(peso,altura){
   var imc = 0;
   imc = peso/(altura*altura);
   return imc.toFixed(2);
}
3 respostas
por Andre Louis Souza Ribeiro
| 150.3k xp | 212 posts

Fala! Neita.Tudo bem ?

Testei seu código aqui, e ele está construído da forma correta, porém só algumas correções precisam ser feitas para que ele funcione corretamente.

A primeira mudança é na tag main, ela tem que fechar antes da seção container, englobando toda a tabela de pacientes.

O próximo lugar que precisamos fazer uma correção é na segunda tag script. 

<script src="js/form.js'></script>

No src, as aspas duplas(") estão abrindo, mas está fechando com aspas simples(‘). Com isso, o código não está fechando o src, ele vai considerar que tudo dali para frente está dentro do src até encontrar outra aspas duplas(“). Logo, nossa correção ficará assim:

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

Você não enviou o seu código form.js, mas me baseando no que foi utilizado pelo professor na aula, na hora de selecionar o botão no arquivo js, ele faz isso buscando pelo id "#adicionar-paciente”. Se você seguiu esse método dele, deve fazer uma outra alteração no código HTML na parte do Botão.

Atualmente, seu código do botão está assim:

 <button id="ad-paciente" class="bto botao-principal" type="submit">Adicionar</button>

Mas como vimos, o professor para criar as funções do botão, ele pesquisa o botão pelo id “#adicionar-paciente”,.Por isso, devemos mudar esse id para o qual ele está buscando no arquivo form.js. Ficando da seguinte forma:

 <button id="adicionar-paciente" class="bto botao-principal" type="submit">Adicionar</button>

O Código HTML ficará da seguinte forma então:

<!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">1.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                    </tbody>
                </table>
            </section>
        </main>


        <section class="container">
        <h2 id="titulo-form">Adicionar novo paciente</h2>
        <form id="form-adiciona">
            <div class="grupo">
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class=" campo campo-medio">
        </div>
        <div class="grupo">
            <label for="altura">Altura:</label>
            <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="gordura">% de Gordura:</label>
            <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
        </div>
        <button id="adicionar-paciente" class="bto botao-principal" type="submit">Adicionar</button>
       </form>
    </section>

    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js"></script>
    </body>
    </html>

Sendo somente necessário essas pequenas mudanças para que seu código funcione corretamente.

Se você tiver mais alguma dúvida, estou por aqui.

Abraço e Bons Estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Neita Leal de Mattos Santos
| 151.9k xp | 50 posts

André Louis. Obrigada pela a atenção, estou te enviando o form.js para ver o que não está certo, pois alterei e não funcionou, o paciente não é incluído. form.js


var botaoAdicionar = document.querySelector("#adicionar-paciente");
   botaoAdicionar.addEventListener("click", function(event) {
   event.preventDefault();



   var  form = document.querySelector("#form-adiciona");

   //Extraindo informações do paciente do form

   var paciente = obtemPacienteDoFormulario(form); 



   console.log(paciente);
   console.log(paciente.gordura);

   //Cria a Tr a Td do paciente   

      var pacienteTr= document.createElement("tr");

      var nomeTd= document.createElement("td");
      var pesoTd= document.createElement("td");
      var alturaTd= document.createElement("td");
      var gorduraTd= document.createElement("td");
      var imcTd= document.createElement("td");

      nomeTd.textContent= nome;
      pesoTd.textContent= peso;
      alturaTd.textContent = altura;
      gorduraTd.textContent= gordura;
      imcTd.textContent = calculaImc(peso,altura);

      pacienteTr.appendChild(nomeTd);
      pacienteTr.appendChild(pesoTd);
      pacienteTr.appendChild(alturaTd);
      pacienteTr.appendChild(gorduraTd);
      pacienteTr.appendChild(imcTd);

      //adicionando o paciente na tabela

      var tabela = document.querySelector("#tabela-pacientes");

      tabela.appendChild(pacienteTr);
     });

     function obtemPacienteDoFormulario(form){
      var paciente={
      nome: form.nome.value,
      peso: form.peso.value,
      altura:form.altura.value,
      gordura:form.gordura.value,
      imc: calculaImc(form.peso.value, form.altura.value)
      }
      return paciente;
     }
por Andre Louis Souza Ribeiro
| 150.3k xp | 212 posts

Olá, Neita! Tudo bem ?

Testei esse arquivo form.js que você enviou aqui, e realmente precisa fazer um pequeno ajuste nele, nessa parte :

      nomeTd.textContent= nome;
      pesoTd.textContent= peso;
      alturaTd.textContent = altura;
      gorduraTd.textContent= gordura;
      imcTd.textContent = calculaImc(peso,altura);

Pode reparar que nós não estamos usando essas variáveis nome, peso, altura e gordura diretamente. Nós queremos nome, peso, altura e gordura que foram digitados no formulário, e que estão dentro do paciente que nós criamos na função obtemPacienteDoFormulario:

function obtemPacienteDoFormulario(form){
      var paciente={
      nome: form.nome.value,
      peso: form.peso.value,
      altura:form.altura.value,
      gordura:form.gordura.value,
      imc: calculaImc(form.peso.value, form.altura.value)
      }
      return paciente;
     }

Logo, essa parte do código onde nós passamos nome,peso, altura e gordura deverá ser modificada para a seguinte:


      nomeTd.textContent= paciente.nome;
      pesoTd.textContent= paciente.peso;
      alturaTd.textContent = paciente.altura;
      gorduraTd.textContent= paciente.gordura;
      imcTd.textContent = calculaImc(paciente.peso,paciente.altura);

Mas, mesmo com esse erro ele adicionava o paciente na lista, com os dados incorretos, mas adicionava. Outro motivo que pode estar atrapalhando esse funcionamento correto do código podem ser os** nomes e caminhos do projeto**.

Por exemplo:

    <script src="js/calcula-imc.js"></script>
    <script src="js/form.js"></script>

Se o seu arquivo HTML está chamando essas funções, ele vai entrar na pasta js a partir do caminho onde está esse arquivo HTML e procurar os arquivos calcula-imc.js e form.js. Logo, esses arquivos devem estar com os nomes idênticos aos especificados dentro da tag script. Portanto, seria interessante verificar se no seu projeto esses caminhos e nomes estão todos iguais. Verificar também se os arquivos estão organizados corretamente. Por exemplo: um arquivo HTML e uma pasta js, onde dentro da pasta js tem os dois arquivos Javascript calcula-imc.js e form.js.

Um menu vertical, onde temos um ícone de uma pasta com o nome js, dentro deste, temos dois textos que são calcula-imc e form.js com ícones amarelos escritos js em preto. Em baixo deles temos um texto index.html com um ícone vermelho. A cor de fundo do menu é preto.

Seu form.js corrigido ficará assim:

var botaoAdicionar = document.querySelector("#adicionar-paciente");
   botaoAdicionar.addEventListener("click", function(event) {
   event.preventDefault();



   var  form = document.querySelector("#form-adiciona");

   //Extraindo informações do paciente do form

   var paciente = obtemPacienteDoFormulario(form);



   console.log(paciente);
   console.log(paciente.gordura);

   //Cria a Tr a Td do paciente  

      var pacienteTr= document.createElement("tr");

      var nomeTd= document.createElement("td");
      var pesoTd= document.createElement("td");
      var alturaTd= document.createElement("td");
      var gorduraTd= document.createElement("td");
      var imcTd= document.createElement("td");

      nomeTd.textContent= paciente.nome;
      pesoTd.textContent= paciente.peso;
      alturaTd.textContent = paciente.altura;
      gorduraTd.textContent= paciente.gordura;
      imcTd.textContent = calculaImc(paciente.peso,paciente.altura);

      pacienteTr.appendChild(nomeTd);
      pacienteTr.appendChild(pesoTd);
      pacienteTr.appendChild(alturaTd);
      pacienteTr.appendChild(gorduraTd);
      pacienteTr.appendChild(imcTd);

      //adicionando o paciente na tabela

      var tabela = document.querySelector("#tabela-pacientes");

      tabela.appendChild(pacienteTr);
     });

     function obtemPacienteDoFormulario(form){
      var paciente={
      nome: form.nome.value,
      peso: form.peso.value,
      altura:form.altura.value,
      gordura:form.gordura.value,
      imc: calculaImc(form.peso.value, form.altura.value)
      }
      return paciente;
     }

Peço que faça esses testes e qualquer outro problema estou por aqui. Abraço e Bons Estudos!