Entrar Ainda não tem acesso?
2
respostas

Paciente adicionando não some nunca

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Ighor Domingos Bandeira
| 63.6k xp | 31 posts

Quando eu adiciono um paciente e tento filtrar, não importa oque seja digitado no campo de busca, o paciente novo adicionando nunca desaparece. segue o meu código do filtra.js

const campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", function(){
    const digitado = this.value;

    if (digitado.length > 0){
        pacientes.forEach(function(paciente){
            const nomePaciente = paciente.querySelector(".info-nome");
            const nome = nomePaciente.textContent;

            if(nome != digitado){
                paciente.classList.add("invisivel");
            }else{
                paciente.classList.remove("invisivel");
            }
        });
    }else{
        pacientes.forEach(function(paciente){
            paciente.classList.remove("invisivel");
        });
    }
});

vi que outros alunos também utilizaram o método forEach e chegaram num formato de código igual ao meu.

Obs. não aparece nenhuma mensagem de erro no console. Obs2. depois de adicionar um novo paciente, eu inspecionei o HTML e o HTML do paciente adicionado está igual ao dos antigos pacientes que já estavam na tabela.

2 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Ighor, tudo bem? Espero que sim!

Poderia enviar por favor o código completo da criação de um paciente? Pode ser que você não esteja adicionando o nome correto das classes, assim não sendo possivel o obter os nomes e fazer a comparação com o valor digitado.

Aguardo o retorno!

por Ighor Domingos Bandeira
| 63.6k xp | 31 posts

segue o código completo do arquivo "form.js"

const tabela = document.querySelector("#tabela-pacientes");
const form = document.querySelector("#form-adiciona");
const botaoAdicionar = document.querySelector('#adicionar-paciente');


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

    const paciente = obtemPacienteDoFormulario(form);



    const erros = validaPaciente(paciente);

    if(erros.length > 0){
        exibeMensagensDeErro(erros);

        return;
    }

    adicionaPacienteNaTabela(paciente)

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

});

function adicionaPacienteNaTabela(paciente){
    const pacienteTr = montaTr(paciente);
    tabela.appendChild(pacienteTr);
}

function exibeMensagensDeErro(erros){
    const ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro){
        const 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){
    const 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){
    const td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

function validaPaciente(paciente){
    const erros = [];

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

    if(!validaAltura(paciente.altura)){
        erros.push("altura inválida");
    }

    if(paciente.nome.length == 0){
        erros.push("Paciente sem nome");
    }

    if(paciente.gordura.length == 0){
        erros.push("Paciente sem indice de gordura");
    }
    return erros;
}