Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Não consigo adicionar mais os pacientes e não aparece também os erros.

MEU FORM. JS É ASSIM:

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

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

    var paciente =  obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

     var pacienteTr = validapaciente = montaTr(paciente);

     var erros = validapaciente(paciente);
     console.log(erros);
     if(erros.length > 0){
         exibeMensagensDeErro(erros);

         return;
     }

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

    tabela.appendChild(pacienteTr);

    form.reset(); 
    var  mensagensErro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTML = "";
});

function exibeMensagensDeErro(erros){
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";
    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent =  erro;
        ul.appendChild(li);
    });

}

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;
}

function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado,classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validapaciente(paciente){

    var erros = [];

    if(paciente.nome.length == 0 ){
        erros.push("O nome não pode estar em branco!");
    }

    if(!validaPeso(paciente.peso)){
        erros.push("Peso é inválido!");
    }

    if(!validaAltura(paciente.altura)){
        erros.push("Altura é Inválida!");

    }

    if(paciente.gordura.length == 0){
        erros.push("A gordura do meu paciente não pode ser em branco!")
    }

    if(paciente.peso.length ==0){
        erros.push("O peso não pode ser em branco!");
    }
    if(paciente.altura.length ==0){
        erros.push("A altura não pode ser em branco!");
    }
}

se alguém me ajudar, ficarei grata :D

8 respostas

Oi, Laíza, tudo bem com você?

Bem, fui testar seu código e olhei o console depois de tentar adicionar um paciente. Olha o que apareceu:

Console com o erro "Uncaught TypeError: validapaciente is not a function", indicando na linha 13 do código

O console tá dizendo que validapaciente não é uma função na linha 13:

var erros = validapaciente(paciente);

Aí eu percebi que um pouco antes disso, na linha 11, você tem esse código:

var pacienteTr = validapaciente = montaTr(paciente);

Opa! Você fez duas atribuições seguidas aqui! A função validapaciente acabou recebendo o resultado de montaTr(paciente), e deixou de ser uma função (e até a variável pacienteTr recebeu o resultado de montaTr(paciente) também).

Acredito que você queria ter algo assim:

var pacienteTr = montaTr(paciente);

Na verdade, percebi que você até já fez essa instrução no código, então basta excluir a linha 11 :)

Problema resolvido! Só que apareceu outro! Agora tá aparecendo esse erro no console quando a gente tenta adicionar um paciente novo:

Console com duas mensagens: a primeira é "undefined" e a segunda é um erro "Uncaught TypeError: Cannot read property 'length' of undefined"

Até te convido a tentar descobrir a causa do problema antes de prosseguirmos!

Agora que você já tentou descobrir o problema, mesmo que não tenha conseguido resolvê-lo, vamos lá: o console diz que não consegue ler a propriedade 'length' de undefined nessa linha:

if (erros.length > 0) {

Ou seja, a variável erros está com valor undefined! Vamos investigar então onde ela está sendo declarada:

var erros = validapaciente(paciente);

Ela está recebendo o valor de retorno da função validapaciente. Quando vamos investigar a função no final do código, percebemos que faltou o comando return erros! Sua função deve ficar assim:

function validapaciente(paciente) {

    var erros = [];

    // Verificações...

    return erros;
}

Quando não retornamos nada para a função, seu valor de retorno se torna undefined.

Espero ter ajudado! Se tiver mais dúvidas, estaremos aqui para te ajudar. Bons estudos! :)

Desculpa eu não entendi, tenho que trocar disso:

var pacienteTr = validapaciente = montaTr(paciente);

     var erros = validapaciente(paciente);
     console.log(erros);
     if(erros.length > 0){
         exibeMensagensDeErro(erros);

         return erros;
     }

para isto?:

function validapaciente(paciente) {

    var erros = [];

    // Verificações...

    return erros;
}

desconfio de mais coisas, porque não consigo simplesmente adicionar mais pacientes:

MEU 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 tdAltura = paciente.querySelector(".info-altura");

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

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

    var pesoEhValido = validaPeso(peso);
    var alturaEhValida = validaAltura(altura);

    if(!pesoEhValido){
        console.log("Peso Inválido!");
        pesoEhValido = false;
        tdImc.textContent = "Peso Inválido!";
        paciente.classList.add("paciente-invalido");
    }

    if(!alturaEhValida){
        console.log("Altura Inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura Inválida!!";
        paciente.classList.add("paciente-invalido");
    }

    if(pesoEhValido && alturaEhValida){
        var imc = peso / ( altura * altura);    
        tdImc.textContent = imc;
    }    

}

function validaPeso(peso){
    if(peso >= 0 && peso < 1000){
        return true;
    }else{
        return false;
    }

}

function validaAltura(altura){
    if(altura >=0 && altura <= 3.0){
        return true;
    }else{
        return false;
    }


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

        imc = peso / (altura * altura);

        return imc.toFixed(2);
    }
}

fora que meu código de IMC está todo fora de estética:


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

        imc = peso / (altura * altura);

        return imc.toFixed(2);
    }

não quer funciona o imc.toFixed(2) por algum motivo que eu não consegui achar.

voce acha que é minha tabela? algum valor de INPUT que não funciona?

MEU HMTL:

<!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">55</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>
                    <ul id="mensagens-erro">

                    </ul>
                    <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/calcula-imc.js"></script>
     <script src="js/form.js"></script>
     <script src="js/removendo-paciente.js"></script>            

    </body>
</html>

Olá novamente, Laíza!

Vamos lá, primeiro vamos ajeitar o arquivo form.js. Vou mandar para você a parte inicial de como deveria ser seu código:

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

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

    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    // var pacienteTr = validapaciente = montaTr(paciente);

    var erros = validapaciente(paciente);
    console.log(erros);
    if (erros.length > 0) {
        exibeMensagensDeErro(erros);

        return;
    }

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

    tabela.appendChild(pacienteTr);

    form.reset();
    var mensagensErro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTML = "";
});

Perceba que eu comentei a linha var pacienteTr = validapaciente = montaTr(paciente);, pois é dela que você não precisa, ok? Era esse comando que estava dando erro.

O próximo passo agora é simplesmente adicionar o comando return erros na declaração da sua função validapaciente, que fica lá no final do arquivo. A declaração da sua função ficará assim:

function validapaciente(paciente) {

    // Verificações...

    return erros; // Código adicionado!
}

No lugar desse comentário // Verificações..., você coloca o código das verificações de erro, ok? Eu não coloquei apenas para o post não ficar muito grande.

Ou seja, do código que você mandou do form.js, são apenas essas mudanças que você precisa fazer. Se ainda restar dúvidas, esse é o código completo do arquivo form.js:

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

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

    var paciente = obtemPacienteDoFormulario(form);

    var pacienteTr = montaTr(paciente);

    // var pacienteTr = validapaciente = montaTr(paciente);

    var erros = validapaciente(paciente);
    console.log(erros);
    if (erros.length > 0) {
        exibeMensagensDeErro(erros);

        return;
    }

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

    tabela.appendChild(pacienteTr);

    form.reset();
    var mensagensErro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTML = "";
});

function exibeMensagensDeErro(erros) {
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";
    erros.forEach(function (erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });

}

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;
}

function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

function validapaciente(paciente) {

    var erros = [];

    if (paciente.nome.length == 0) {
        erros.push("O nome não pode estar em branco!");
    }

    if (!validaPeso(paciente.peso)) {
        erros.push("Peso é inválido!");
    }

    if (!validaAltura(paciente.altura)) {
        erros.push("Altura é Inválida!");

    }

    if (paciente.gordura.length == 0) {
        erros.push("A gordura do meu paciente não pode ser em branco!")
    }

    if (paciente.peso.length == 0) {
        erros.push("O peso não pode ser em branco!");
    }
    if (paciente.altura.length == 0) {
        erros.push("A altura não pode ser em branco!");
    }

    return erros; // Código adicionado!
}

Vou mandar em outro post o problema que você está tendo com o IMC!

No seu arquivo calcula-imc.js, no final do arquivo, percebi que você tem esse código:

function validaAltura(altura){
    if(altura >=0 && altura <= 3.0){
        return true;
    }else{
        return false;
    }


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

        imc = peso / (altura * altura);

        return imc.toFixed(2);
    }
}

O problema desse código é que, se você prestar atenção nas chaves, a função calculaImc está dentro da função validaAltura! Do jeito que está, você não conseguirá chamar a função calculaImc no restante do seu código!

Para corrigir isso, basta fechar a função validaAltura com a chave }, antes de declarar a função calculaImc, assim:

function validaAltura(altura){
    if(altura >=0 && altura <= 3.0){
        return true;
    }else{
        return false;
    }

}

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

    imc = peso / (altura * altura);

    return imc.toFixed(2);
}

E por fim, eu notei que no final do bloco for do seu arquivo, você tem esse código:

if(pesoEhValido && alturaEhValida){
        var imc = peso / ( altura * altura);    
        tdImc.textContent = imc;
    }    

Esse código é executado assim que a página é carregada, e vai funcionar para os primeiros pacientes. Esse código calcula o IMC, mas não está formatando para duas casas decimais. Para realizar a formatação, você pode então usar a função calculaImc. Assim:

if(pesoEhValido && alturaEhValida){
        var imc = calculaImc(peso, altura);
        tdImc.textContent = imc;
    }    

Esses são os únicos erros! Testei seu HTML e não há nenhum problema com ele.

Em caso de dúvida, esse é o código completo do arquivo 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 tdAltura = paciente.querySelector(".info-altura");

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

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

    var pesoEhValido = validaPeso(peso);
    var alturaEhValida = validaAltura(altura);

    if(!pesoEhValido){
        console.log("Peso Inválido!");
        pesoEhValido = false;
        tdImc.textContent = "Peso Inválido!";
        paciente.classList.add("paciente-invalido");
    }

    if(!alturaEhValida){
        console.log("Altura Inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura Inválida!!";
        paciente.classList.add("paciente-invalido");
    }

    if(pesoEhValido && alturaEhValida){
        var imc = calculaImc(peso, altura);
        tdImc.textContent = imc;
    }    

}

function validaPeso(peso){
    if(peso >= 0 && peso < 1000){
        return true;
    }else{
        return false;
    }

}

function validaAltura(altura){
    if(altura >=0 && altura <= 3.0){
        return true;
    }else{
        return false;
    }

}

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

    imc = peso / (altura * altura);

    return imc.toFixed(2);
}

Espero ter ajudado! Se ainda houver problemas, pode nos chamar. Bons estudos!

solução!

Moço, muito obrigada de verdade, eu entendi os erros, eram uma linha fora da função, obrigada mesmo, eu corrigir tudo aqui e sua explicação me ajudou bastante, fiquei com nenhuma dúvida, obrigada :D