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

PERDI A LINHA DE RACIOCÍNIO NO CONTEÚDO E NÃO CONSIGO AJUSTAR MEU CÓDIGO.

Perdi fio da meada. Ja assisti as aulas do módulo 5 algumas vezes e não consigo achar o erro. Meu programa não add novos pacientes. Essa perda de tempo está me deixando frustado. Não sei por onde recomeçar. Seria interessante disponibilizar o projeto a cada módulo assim eu poderia comparar os códigos.

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 tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
    form.reset();

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"));


});

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 montaTd(dado, classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}
CALCULA IMC
var titulo = document.querySelector(".titulo");
titulo.textContent = "Dr Guilherme Galito - Ortopedista Especialista em Coluna";


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 imc = peso / (altura * altura);

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

var pesoValido = validaPeso(peso);
var alturaValido = validaAltura(altura);

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

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

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

}

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

    imc = peso / (altura * altura);

    return imc.toFixed(2);

}

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

Oi, Wilson, tudo bem?

Segue o link do projeto dessa aula: https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24440. Quando você tentar adicionar um paciente e abre o console do navegador, alguma mensagem de erro aparece? Ela pode nos guiar a achar o problema.

Oi Láis, obrigado pelo retorno. Esse código que você indicou tem as informações a partir do módulo 4 e antes de terminar o 5, que inclui várias alterações. No capítulo 6, por exemplo, não existe a possibilidade de baixar esse aquivo o que ajudaria muito e inclusive eu sugiro essa mudança. Eu não queria refazer o módulo 5 do zero e sim encontrar o meu erro, caso seja possível.

Essa é mensagem de erro logo após eu tentar add um paciente. Também inclui o código HTML nessa mensagem e talvez seja possível rodar o programa.

form.js:11 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLButtonElement.<anonymous> (form.js:11)
<!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">10000</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.0</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/calculaImc.js"></script>
                <script src="js/form.js"></script>
    </body>
</html>

Oi, Wilson, todas as aulas tem o projeto referente à mesma, o link do projeto da aula 6 está aqui: https://cursos.alura.com.br/course/javascript-programando-na-linguagem-web/task/24486

Nas aulas denominadas "mão na massa" nos comentários, estará o link referente.

solução!

Consegui resolver o problema da inclusão de nomes agora só estou com problemas na validação para informações incoerentes como por exemplo um erro de digitação com aluta de 5.0 metros ou peso acima de 1000. Vou continuar e se até o final do curso não conseguir resolver eu abro uma nova solicitação.

Laís, durante o módulo 5 o professor apresenta a seguinte sugestão de otimização do código.:

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

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

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

Se vc baixar o arquivo do mão na massa que vc indicou o mesmo pedaço de código é:

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.textContent = "Altura inválida";
        paciente.classList.add("paciente-invalido");
    }

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

Eu não entendo essa diferença. No módulo 6 já deveria vir com as alterações das aulas do módulo 5, não?

Lais, o mão na massa da aula 7 tem tudo o que eu estava procurando, obrigado.

Oi, Wilson, tudo bem?

Que bom que conseguiu solucionar. Qualquer dúvida pode falar :}