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

[object HTMLInputElement] essa informação aparece para o nome é gordura corporal. oque estou fazendo de errado?

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Boas Práticas com Javascript e atividade Melhorando ainda mais o código

por antonio adecio
| 47.2k xp | 8 posts
for(var i = 0; i < pacientes.length; i++){

var paciente = pacientes[i];

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

var altura = tdAltura.textContent;
var peso = tdPeso.textContent;

var imc = peso/(altura*altura);
console.log(imc);

var tdImc = paciente.querySelector(".info-imc");
tdImc.textContent = imc;

var pesoEhvalido = true;
var alturaEhvalida = true;

if(peso <= 0 || peso >= 1000){
    console.log("peso invalido");
    pesoEhvalido = false;
    tdImc.textContent = "peso invalido";
    paciente.classList.add("paciente-invalido");

}
 if(altura <= 0 || altura >= 3.00){
     console.log("altura invalida")
     alturaEhvalida = false;
     tdImc.textContent = "altura invalida"
     paciente.classList.add("paciente-invalido");
 }

 if(alturaEhvalida && pesoEhvalido){
     var imc = cauculaImc(peso,altura);
    tdImc.textContent = imc;

 }

  }

  function cauculaImc(peso,altura){
      var imc = 0;

      imc = peso / (altura * altura);

      return imc.toFixed(2);
  }

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

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

    var paciente = obtemPacienteDoFormulario(form);
     console.log();

    var pacienteTr = montaTr(paciente);


    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: cauculaImc(form.peso.value, form.altura.value)


    }

    return paciente;
  }

  function montaTr(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 = cauculaImc(peso,altura);

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

    return pacienteTr;
  }
5 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Antonio, beleza? Olhando meio que por cima, seu código parece estar errado, a essas horas não achei nenhum erro.

Consegue me mandar o arquivo .js e .html inteiros? Dessa maneira consigo montar o cenário e simular aqui, fica mais fácil te ajudar a encontrar o problema.

Fico no aguardo.

por antonio adecio
| 47.2k xp | 8 posts
<!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" >
                            <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>
        </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="botao bto-principal">Adicionar</button>
          </form>

        </section>
       <script src="js/principal.js"></script>
       <script src="js/form.js"></script>
    </body>
</html>1
por antonio adecio
| 47.2k xp | 8 posts

o Js já mandei completo lá em cima

`

por Anderson Moreno Perez
| 121k xp | 5 posts
Principal Engineer

Boa noite Antonio,

Vamos lá, acredito que quando você copiou o código do arquivo .js ficou faltando a primeira linha, que seria essa:

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

Mas o que realmente esta causando o problema descrito por você esta dentro da função "montaTr ( )", mas especificamente essa parte do código:

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

Você se esqueceu de mudar de onde as informações que serão passadas para os Tds (nomeTd, pesoTd, alturaTd, gorduraTd e imcTd) estão vindo.

Antes da função "obtemPacienteDoFormulario( )" ser criada essas informações vinham de variáveis individuais (nome, peso, altura, gordura) que recebiam os valores do formulario HTML (o nosso "form" no código JS), mas agora essa função guarda as informações do formulario em um objeto (paciente), o mesmo objeto que você esta passando como parâmetro da sua função "montaTr ( )".

Sendo assim, você precisa buscar esses valores dentro desse objeto, mas especificamente, cada valor dentro da propriedade correspondente no objeto. Com isso o seu código fica assim:

nomeTd.textContent = paciente.nome;
pesoTd.textContent = paciente.peso;
alturaTd.textContent = paciente.altura;
gorduraTd.textContent = paciente.gordura;
imcTd.textContent = paciente.imc;

Repare que você não precisa mais chamar a função "cauculaImc ( )" nessa parte do código, pois a função "obtemPacienteDoFormulario( )" já entrega para você o valor do imc calculado, dentro da propriedade "imc" do objeto "paciente", em resumo, dentro do "paciente.imc".

Grande abraço.

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Antonio, é exatamente o que Anderson explicou, realmente não tinha visto essa falha, acredito que com essa correção o problema irá resolver.

Abraços