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

código funciona, mas aparece mensagem de erro

Olá! Gostaria de tirar uma dúvida sobre a atividade 3 da aula 08. O meu código funciona perfeitamente, adicionando novos pacientes e fazendo o filtro entre eles, porém a cada paciente novo adicionado, no meu console, aparece a seguinte mensagem de erro:

form.js:25 Uncaught ReferenceError: mensagensErro is not defined at HTMLButtonElement. (form.js:25)

Olhei algumas vezes e não consegui encontrar meu erro. Segue abaixo meu código

FORM.JS

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

    var form = document.querySelector("#form-adiciona");
    //extraindo informacoes do paciente do form
    var paciente = obtemPacienteDoFormulario(form);

    //cria a tr e a td do paciente
    var pacienteTr = montaTr(paciente);

    var erros = validaPaciente(paciente);

    if(erros.length > 0){

        exibeMensagemDeErro(erros);
        return;
    }

    //adiciona o paciente na tabela
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);

    form.reset();
    mensagensErro.innerHTML = "";
});

function exibeMensagemDeErro(erros){

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

    erros.forEach(function(erro){
        var 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){
    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;
}

function montaTd(dado, classe){
    var td = document.createElement("td"); 
    td.textContent= dado;
    td.classList.add(classe);

    return td;
}

function validaPaciente(paciente){

    var erros = [];

    if(paciente.nome.length == 0) erros.push("Insira um nome, por favor.");
    if(paciente.peso.length == 0) erros.push("Insira um peso, por favor.");
    if(paciente.altura.length == 0) erros.push("Insira uma altura, por favor.");
    if(paciente.gordura.length == 0) erros.push("Insira uma % de gordura, por favor.");

    if(!validaPeso(paciente.peso)) erros.push("Peso inválido!");
    if(!validaAltura(paciente.altura)) erros.push("Altura inválida!");

    return erros;

}

FILTRA.JS

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

campoFiltro.addEventListener("input", function(){
    console.log(this.value);

    var pacientes = 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;

            if(nome != this.value){
                paciente.classList.add("invisivel");
            }else{
                paciente.classList.remove("invisivel");
            }
        }
    }else{
        for(var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
});
4 respostas

Utilize uma expressão regular para melhorar seu código talvez isso de um jeito.

faça isso:

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.add("invisivel");
    }else{
          paciente.classList.remove("invisivel");
    }
}

espero ter ajudado.

não funcionou, o condigo continua rodando mas o erro aparece no meu console

solução!

Seu erro esta dando no seguinte código(FORM.JS) :

mensagensErro.innerHTML = "";

você define essa variável onde? pois o motivo do erro e ela, talvez seja por que você esqueceu de tira-la.

Ou faça isso:

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

era isso mesmo, achei que essa linha que tava apagando as mensagens de erro conforme os campos iam sendo preenchidos. Obrigado pela ajuda!