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

Problema ao filtrar paciente inserido

O filtro funciona perfeitamente com os pacientes nativos, porém ao adicionar um novo paciente através do formulário, o mesmo não é filtrado.

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

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

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

    if(this.value.length > 0){
        for(var i = 0; i < pacients.length; i++){
            var tdName = pacients[i].querySelector(".info-nome");
            var tdContent = tdName.textContent;
            var expression = new RegExp(this.value, "i");

            if(expression.test(tdContent)){
                pacients[i].classList.remove("hidePacient");
            } else{
                pacients[i].classList.add("hidePacient");
            }
        }
    } else{
        for(var i = 0; i < pacients.length; i++){
            pacients[i].classList.remove("hidePacient");
        }
    }
});
3 respostas

Oi Emerson, tudo bem? Posta o código que adiciona parciente pra gente dá uma olhada aqui pra tentar descobrir se tem algum problema?

var btnAddPacient = document.querySelector("#adicionar-paciente");
var msgError = document.querySelector("#mensagem-erro");

btnAddPacient.addEventListener("click", function(event){

    event.preventDefault();

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

    var pacient = getPacientForm(form);

    var errors = validatePacient(pacient);

    if(errors.length > 0){
        showMessagesErrors(errors);
        console.log(errors.length);
        return;
    }

    var pacientTr = createTrElement(pacient);

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

    form.reset();

    var eraseErrorsMsg = document.querySelector("#mensagem-erro");
    eraseErrorsMsg.innerHTML = "";

});

function getPacientForm(form){

    var pacient = {
        name : form.nome.value,
        weight : form.peso.value,
        height : form.altura.value,
        fat : form.gordura.value,
        imc : calculaImc(form.peso.value, form.altura.value)
    }
    return pacient;
}

function createTrElement(pacient){
    var pacientTr = document.createElement("tr");
    pacientTr.classList.add("paciente")

    pacientTr.appendChild(createTdElement(pacient.name, "info-name"));
    pacientTr.appendChild(createTdElement(pacient.weight, "info-peso"));
    pacientTr.appendChild(createTdElement(pacient.height, "info-altura"));
    pacientTr.appendChild(createTdElement(pacient.fat, "info-gordura"));
    pacientTr.appendChild(createTdElement(pacient.imc, "info-imc"));

    return pacientTr;
}

function createTdElement(data, aClass){
    var td = document.createElement("td");
    td.textContent = data;
    td.classList.add(aClass);
    return td;
}

function validatePacient(pacient){

    var errors = [];

    if(!invalidWeight(pacient.weight)){
        errors.push("Peso invalido!");
    }

    if(!invalidHeight(pacient.height)){
        errors.push("Altura inválida!");
    }

    if(!invalidFat(pacient.fat)){
        errors.push("Valor gordura inválido!");
    } 

    if(pacient.name.length == 0){
        errors.push("Favor preencher NOME!");
    }

    if(pacient.weight.length == 0){
        errors.push("Favor preencher valor de PESO!");
    }

    if(pacient.height.length == 0){
        errors.push("Favor preencher valor de ALTURA!");
    }

    if(pacient.fat.length == 0){
        errors.push("Favor preencher valor de GORDURA!")
    }
    return errors;
}

function showMessagesErrors(errors){

    var ulErrors = document.querySelector("#mensagem-erro");
    ulErrors.innerHTML = "";

    errors.forEach(function(positionError){
        var li = document.createElement("li");
        li.textContent = positionError;
        ulErrors.appendChild(li);
    });
}
solução!

Oi Emerson, É um probleminha de confusão mesmo. Veja que no nome da classe na hora de adicionar o td você escreve em inglês info-name e na hora de fazer a pesquisa, você usa info-nome. Por isso o problema que você reporta acontece. Verifica essa parte dos nomes e testa novamente?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software