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

Novos pacientes não são filtrados. Class "info-nome" está sendo incluída

Boa noite,

Os novos pacientes não estão sendo filtrados.

Analisei o código para adicionar pacientes (form.js), e a class "info-nome" está sendo incluída nos novos pacientes adicionados à tabela.

Seguem os códigos (obs: o código não está ficando inteiro dentro da formatação de código. Clico em inserir código, posiciono o cursor no mesmo lugar onde estava, colo, mas mesmo assim alguns pedaços não ficam na formatação):

filtra.js:

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

campoFiltro.addEventListener ("input", function() { var paciente = document.querySelectorAll(".paciente");

if (this.value.length > 0) {

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

        if (expressao.test(nome)) {
            paciente.classList.remove("invisivel");
        } else {
            paciente.classList.add("invisivel");
        }

    }    
}    
else {
    for (var i = 0; i < pacientes.length; i++) {
    var paciente = pacientes[i];
    paciente.classList.remove("invisivel");
    }
}

})

form.js:

var botaoAdicionar = document.querySelector("#adicionar-paciente");

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

var form = document.querySelector("#form-adiciona");

var paciente = obtemPacienteDoFormulario(form);

if(!validaPaciente(paciente)) {
    alert("Paciente inválido");
    return;
}

var pacienteTr = montaTr(paciente);

var erros = validaPaciente(paciente);
console.log(erros);

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

    return;
}

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

tabela.appendChild(pacienteTr);

form.reset();

document.querySelector("#mensagens-erro").innerHTML = ""

});

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.classList.add(classe); td.textContent = dado; return td; }

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;

}

4 respostas

Oi, Bruno, tudo bem?

Em filtra.js dentro do if se a condição for sarisfeita é para adicionar a classe paciente.classList.add("invisivel"); casa não é para remover paciente.classList.remove("invisivel");, ficando assim:

  if (!expressao.test(nome)) {
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }

Você inverteu o valor de add com o remove. Testa e me fala se deu certo!

Olá Laís,

Não de certo. Agora, quando digito o nome de um paciente da tabela, ele some ao invés de ser único a aparecer, omitindo os demais. Por exemplo, ao digitar Paulo, o Paulo some da tabela, ficando os outros pacientes com nomes diferentes. Além disso, os pacientes novos incluídos através do

não são filtrados, não importando se eu coloco o nome desses novos ou dos que já estão gravados no código fonte no campo de busca. Os novos continuam sempre lá na tabela, visíveis.

Analisei o console, e o problema é que o filtra.js não está adicionando a classe "invisivel" nos novos pacientes adicionados através do form. Mas não consigo resolver esse problema.

solução!

resolvi! O problema era na declaração da variável:

var paciente = document.querySelectorAll(".paciente");

O certo é pacientes:

campoFiltro.addEventListener ("input", function() {
    var pacientes = document.querySelectorAll(".paciente");

    if (this.value.length > 0) {

        for (var i = 0; i < pacientes.length; i++) {
            //var paciente = pacientes[i];
            var tdNome = pacientes[i].querySelector(".info-nome");
            var nome = tdNome.textContent;
            var expressao = new RegExp(this.value, "i");

            if (expressao.test(nome)) {
                pacientes[i].classList.remove ("invisivel");
            } else {
                pacientes[i].classList.add ("invisivel");
            }

        }    
    }