1
resposta

Não Consigo Filtrar meu paciente incluído, só filtra os pacientes já adicionados.

Código Inicial

let tabelaPacientes = document.querySelector("#tabela-pacientes");
let pacientes = tabelaPacientes.querySelectorAll(".paciente");

Código que adiciona novo paciente

let button = document.querySelector("#adicionar-paciente");
let form = document.querySelector("#form-adiciona");
let infoErro = document.querySelector(".info-erro");


button.addEventListener("click", function(event){
    event.preventDefault();

    if (validaçãoDeDados()){
        novaLinha();
        form.reset();
        infoErro.textContent = "";
        infoErro.classList.remove("aponta_erro");
    } else {
        mostraErro();
    }

});

function novaLinha() {
    let novoPaciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value
    }
    let linha = document.createElement("tr");
    linha.classList.add("paciente");

    let campoNome = document.createElement("td");
    campoNome.classList.add("info-nome");
    let nome = campoNome.textContent = novoPaciente.nome;

    let campoPeso = document.createElement("td");
    campoPeso.classList.add("info-peso");
    let peso = campoPeso.textContent = novoPaciente.peso;

    let campoAltura = document.createElement("td");
    campoAltura.classList.add("info-altura");
    let altura = campoAltura.textContent = novoPaciente.altura;

    let campoGordura = document.createElement("td");
    campoGordura.classList.add("info-gordura");
    let gordura = campoGordura.textContent = novoPaciente.gordura;

    let campoImc = document.createElement("td");
    campoImc.classList.add("info-imc");
    campoImc.textContent = calculaImc(peso, altura);

    linha.appendChild(campoNome);
    linha.appendChild(campoPeso);
    linha.appendChild(campoAltura);
    linha.appendChild(campoGordura);
    linha.appendChild(campoImc);

    tabelaPacientes.appendChild(linha);

}

function validaçãoDeDados(){
    let dadosOk = true;

    let novoPaciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value
    }

    if (novoPaciente.nome == ""){
        dadosOk = false;
    }

    if (novoPaciente.peso <= 0 || novoPaciente.peso >= 300){
        dadosOk = false;
    }

    if (novoPaciente.altura <= 0 || novoPaciente.altura >= 3){
        dadosOk = false;
    }

    if (novoPaciente.gordura < 0 || novoPaciente.gordura == ""){
        dadosOk = false;
    }

    return dadosOk;
}

function mostraErro(){
    let novoPaciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value
    }

    infoErro.classList.add("aponta_erro");

    if (novoPaciente.nome == ""){
        infoErro.textContent = "Campo Nome Vazio";
    }

    if (novoPaciente.peso <= 0 || novoPaciente.peso >= 300){
        infoErro.textContent = "Peso Inválido";
    }

    if (novoPaciente.altura <= 0 || novoPaciente.altura >= 3){
        infoErro.textContent = "Altura Inválida";
    }

    if (novoPaciente.gordura < 0 || novoPaciente.gordura == ""){
        infoErro.textContent = "Gordura Inválida";
    }
}

Abaixo código filtrar

let pesquisa = document.querySelector("#filtrar");

pesquisa.addEventListener("input", function(){

    for (var i = 0; i < pacientes.length; i++){
        let paciente = pacientes[i];
        let nomePaciente = paciente.querySelector(".info-nome");
        let nome = nomePaciente.textContent;
        let expressão = new RegExp(this.value, "i");

        if (expressão.test(nome)) {
            paciente.classList.remove("esconde");
        } else {
            if (this.value != ""){
                paciente.classList.add("esconde");
            } else {
                paciente.classList.remove("esconde");
            }
        }
    }

});
1 resposta

Oi, Helton, tudo bem?

Desculpa pela demora em te responder!

Pelo que entendi, você está tentando filtrar um novo paciente que foi adicionado, mas só consegue filtrar os pacientes que já estavam na tabela. Isso acontece porque você está pegando a lista de pacientes antes de adicionar o novo paciente.

Uma solução seria adicionar o novo paciente na lista de pacientes logo após adicionar na tabela. Para isso, você pode adicionar a linha do novo paciente na tabela e depois adicionar esse paciente na lista de pacientes, por meio do comando .push():

pacientes.push(linha); // adiciona o novo paciente na lista de pacientes

Esse comando pode ser inserida dentro da função novaLinha(). O código completo segue abaixo:

function novaLinha() {
    let novoPaciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value
    }
    let linha = document.createElement("tr");
    linha.classList.add("paciente");

    let campoNome = document.createElement("td");
    campoNome.classList.add("info-nome");
    let nome = campoNome.textContent = novoPaciente.nome;

    let campoPeso = document.createElement("td");
    campoPeso.classList.add("info-peso");
    let peso = campoPeso.textContent = novoPaciente.peso;

    let campoAltura = document.createElement("td");
    campoAltura.classList.add("info-altura");
    let altura = campoAltura.textContent = novoPaciente.altura;

    let campoGordura = document.createElement("td");
    campoGordura.classList.add("info-gordura");
    let gordura = campoGordura.textContent = novoPaciente.gordura;

    let campoImc = document.createElement("td");
    campoImc.classList.add("info-imc");
    campoImc.textContent = calculaImc(peso, altura);

    linha.appendChild(campoNome);
    linha.appendChild(campoPeso);
    linha.appendChild(campoAltura);
    linha.appendChild(campoGordura);
    linha.appendChild(campoImc);

    tabelaPacientes.appendChild(linha);

    pacientes.push(linha);
}

Assim, quando você for filtrar os pacientes, a lista de pacientes já terá o novo paciente adicionado.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!