2
respostas

Erro, não consigo exibir a validação dos campos na tela

Não consigo exibir as mensagens de erro na tela, olhei e olhei o código e não consegui achar o erro. No inspecionar do navegador ele diz isso: Uncaught TypeError: Cannot read property 'appendChild' of null form.js:29 at form.js:29 at Array.forEach () at exibeMensagemDeErro (form.js:26) at HTMLButtonElement. (form.js:16)

var botaoAdicionar = document.querySelector('#adicionar-paciente')
botaoAdicionar.addEventListener('click',function(event){
    event.preventDefault(); // previne o comportamento do botao sumir

    var form = document.querySelector('#form-adiciona');
    //Extraindo informações do paciente do form
    var paciente = obtemPacienteDoFormulario(form);

    //Cria a Td e a Tr do paciente
    var pacienteTr = montaTr(paciente);

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

    if(erros.length > 0) {
        exibeMensagemDeErro(erros);
        return;
    }

    var tabela = document.querySelector('#tabela-pacientes')
    tabela.appendChild(pacienteTr);
});

function exibeMensagemDeErro(erros) {
    var ul = document.querySelector('#mensagens-erro');
    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");

    var nomeTd = montaTd(paciente.nome, "info-nome");
    var pesoTd = montaTd(paciente.peso, "info-peso");
    var alturaTd = montaTd(paciente.altura, "info-altura");
    var gorduraTd = montaTd(paciente.gordura, "info-gordura");
    var imcTd = montaTd(paciente.imc, "info-imc");


    pacienteTr.appendChild(nomeTd);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);

    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(!validaPeso(paciente.peso)){
        erros.push("Peso é inválido");
    }

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

    return erros;
}
2 respostas

Fala ai Guilherme, tudo bem? Parece que o erro está nessa linha ul.appendChild(li);, verifica se na sua página existe um elemento com o valor de id igual à mensagens-erro, isso porque tu busca o ul através do seletor por id:

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

Espero ter ajudado.

Oi Guilherme!

O erro que você recebeu está dizendo que o valor de ul encontrada pelo document.querySelector('#mensagens-erro') é nula, ou seja, não foi encontrado um elemento com o id #mensagens-erro'. Verifique se no html você colocou o id correto na ul. Se não for isso, poste aqui também seu html para que eu possa verificar.

Espero ter ajudado.