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

primeiro paciente da tabela fica vermelho

o primeiro paciente da tabela está ficando como "paciente invalido", adquirindo essa classe ele fica vermelho, o detalhe é que eu nao sei onde está o erro pois já li e reli o codigo e nao achei, alguem pode me ajudar??

calculo.js 

var pacientes = document.querySelectorAll(".paciente"); //importa todos os dados dos pacientes
for (var i = 0; i < pacientes.length; i++)
{   
    var paciente = pacientes[i];

    var tdpeso = paciente.querySelector('.info-peso'); //de dentro da linha importada pega o td de peso
    var peso = tdpeso.textContent; // dentro do td do peso pega o seu valor escrito no caso 100

    var tdaltura = paciente.querySelector(".info-altura"); // pega o valor da td dentro da tr
    var altura = tdaltura.textContent; // pega o valor escrito dentro do td

    //comeco da validacao para imc//
    function validapeso(peso)
    {
        if (peso > 0 && peso < 400)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    function validaaltura(altura)
    {
        if (altura > 0 && altura < 3)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    var tdimc = paciente.querySelector(".info-imc"); //pega a celula do imc e define como uma variavel dentro do js

    if (!pesovalido)
    {
        pesovalido = false; //caso o valor do peso seja irregular define como invalido e printa dentro da celula como valor invalido
        tdimc.textContent = "Valor inválido";
        paciente.classList.add("invalido");
    }
    if (!alturavalida)
    {
        tdimc.textContent = "Valor inválido"; //caso o valor da altura seja irregular define como invalido e printa dentro da celula como valor invalido
        alturavalida = false;
        paciente.classList.add("invalido");
    }

    var alturavalida = validaaltura(altura);
    var pesovalido = validapeso(peso); 

function calculo(altura, peso)
{
    var imc = 0;
    imc = peso/(altura*altura);
    return imc.toFixed(1);
}

    if (pesovalido && alturavalida) // <-- como os valores sao validos ja de inicio passa para essa etapa
    {
        var imc = calculo(altura, peso);
        tdimc.textContent = imc;
    }
}


form.js

var botao = document.querySelector("#adicionar-paciente");
botao.addEventListener("click", function(event)
{
    event.preventDefault();
    //cria tr e td para um novo paciente
    var form = document.querySelector("#formadiciona");

    var paciente = dadosForm(form);
    var pacienteTr = montaTr(paciente);   

    if(!validapaciente(paciente))
    {
        console.log("paciente invalido");
        return false;
    }

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

    form.reset();
}
);
function dadosForm(form) {

        var paciente =
        {
            nome: form.nome.value,
            peso: form.peso.value,
            altura: form.altura.value,
            gordura: form.gordura.value,
            imc: calculo(form.altura.value, form.peso.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)
{
    if(validapeso(paciente.peso) && validaaltura(paciente.altura))
    {
       return true; 
    }
    else
    {
        return false;
    }

}


2 respostas

aq tb ta o codigo html

    <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" >
                        <td class="info-nome">Paulo</td>
                        <td class="info-peso">20</td>
                        <td class="info-altura">1.70</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="formadiciona">
            <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">Adicionar</button>
        </form>
    </section>

</body>
<script src="js/calculo.js"></script>
<script src ="js/form.js"></script>
solução!

resolvi