1
resposta

Colorir os dados de novos pacientes

Depois de adicionar os novos pacientes e coloca-los na tabela, gostaria que eles também fosse validados e pintados de outro cor caso os dados fossem errados. tentei fazer com esse código mas não funcionou:

var titulo = document.querySelector(".titulo");
//var pacientes = document.querySelectorAll('.paciente');

var paciente = document.querySelector("#primeiro-paciente");
var i = 0;

validaTabela();

function validaTabela(){
    var pacientes = document.querySelectorAll('.paciente');

    while (i < 5) {
        paciente = pacientes[i];

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

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

        var alturaEhValida = true;
        var pesoEhValido = true;

        if (peso <= 0 || peso > 1000) {
            tdPeso.textContent = "Peso inválido!";
            pesoEhValido = false;
            paciente.classList.add("paciente-invalido");
        }

        if (altura <= 0 || altura >= 3) {
            tdAltura.textContent = "Altura inválida!";
            alturaEhValida = false;
            paciente.classList.add("paciente-invalido");
        }

        if (alturaEhValida && pesoEhValido) {

            var imc = (peso / (altura * altura)).toFixed(2);
            tdImc.textContent = imc;
            paciente.classList.add("paciente-valido");
        } else {
            tdImc.textContent = "Altura e/ou peso inválidos!"
            paciente.classList.add("paciente-invalido");
        }

        i++;
    }
}



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

    formAdd = document.querySelector("#form-adiciona");
    var nome = formAdd.nome.value;
    var peso = formAdd.peso.value;
    var altura = formAdd.altura.value;
    var gordura = formAdd.gordura.value;

    console.log(nome + peso + altura + gordura);

    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 = calculaIcm(peso, altura);

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

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

    validaTabela();


})

function calculaIcm(peso, altura) {
    return (peso / (altura * altura));
}
1 resposta

Olá, Rodolfo, tudo bem?

O principal problema do seu código é que na função validaTabela(), você sempre percorre apenas os cinco primeiros pacientes por causa do código while (i < 5). Para tornar isso dinâmico com o número de pacientes da tabela, troque esse código por while (i < pacientes.length).

Mas ainda assim, não vai funcionar porque a variável pacientes é criada com o código pacientes = document.querySelectorAll('.paciente'). Os pacientes que são adicionados na tabela pelo formulário não têm a classe paciente, então você também deve adicioná-la depois de criar um novo pacienteTr:

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add('paciente');

Mas além disso, você também precisa adicionar as classes info-peso, info-altura e info-imc nas td correspondentes do novo paciente criado, porque na função validaTabela você também busca esses elementos para fazer a validação. Então o código que você cria os elementos HTML do paciente deve ficar assim:

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add('paciente');

    var nomeTd = document.createElement("td");

    var pesoTd = document.createElement("td");
    pesoTd.classList.add('info-peso');

    var alturaTd = document.createElement("td");
    alturaTd.classList.add('info-altura');

    var gorduraTd = document.createElement("td");

    var imcTd = document.createElement("td");
    imcTd.classList.add('info-imc');

Após isso tudo, deve funcionar. Isso é uma das formas de resolver, mas mais tarde no curso terão aulas de validação de formulário também, onde o paciente é adicionado apenas se os campos estiverem válidos.

Espero ter ajudado! Abraços e bons estudos :)