2
respostas

Erro na função textContext

Boa noite, pessoal! Estou com um problema no código, após adicionar paciente, o console mostra o erro Uncaught TypeError: Cannot set property 'textContent' of null. Não sei como resolver.

// Aqui será acionado os eventos de clique do botão

//botaoAdicionar recebe os dados da página e do html trazendo o id 
    var botaoAdicionar = document.querySelector("#adicionar-paciente");
    botaoAdicionar.addEventListener("click", function(event){/*a variável adiciona o EventListener
                                                        e recebe dois parâmetros click e a função
                                                        anônima q recebe como parâmetro o event    */

    event.preventDefault();//previne o comportamento padrão de certos elementos
//A variável form vai chamar o id do form no html
    var form = document.querySelector("#form-adiciona");
//Chamar a função obterPacienteFormulario
    var paciente = obterPacienteFormulario(form);
//Chamar a função para montar a tr e td
    var pacienteTr = montarTr(paciente);
//Esta variável carregará uma lista de erros no array e recebe a função validarPaciente
    var erro = validarPaciente(paciente);

    if (erro.length > 0) {//esta validação reproduzirá o erro

        var mensagemErro = document.querySelector("#mensagem-erro");
        mensagemErro.textContent = erro;

        return;
    }

    /*if(!validarPaciente(paciente)){
        console.log("Paciente inválido!");
        return;//não retornar valor fará q as outras linhas de código não sejam lidas
    }*/

/*selecionar a tabela, o tbody do HTML através do seu id, 
e utilizar a função appendChild para adicionar a tr como sua filha*/

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

    tabela.appendChild(pacienteTr);
});

function obterPacienteFormulario(form){
//Paciente é um objeto que receberá em chaves as propriedades deste  objeto
    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) 
    }
//Aqui serão extraídas as informações
//A variável nome vai receber os dados do form, o nome do input e o seu valor digitado
    var nome = form.nome.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value;

    return paciente;
}

function montarTr(paciente){

    //A variável irá criar no documento um tr chamando a função createElement 
    var pacienteTr = document.createElement("tr");

    //Agora serão criados os tds desta tr
    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");
    var imcTd = document.createElement("td");

//As tds serão inseridas no tr e a função montarTd é chamada passando o parâmetro dado e classe 
    pacienteTr.appendChild(montarTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montarTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montarTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montarTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montarTd(paciente.imc, "info-imc"));


    return pacienteTr;
}
// O código repetidamente criaria a td, adicionaria uma classe e depois o dado
function montarTd(dado, classe){

    var td = document.createElement("td");
    td.textContent = dado;//o dado é o conteúdo do texto 
    td.classList.add(classe);/*na nova coluna não existe uma classe definida
                            por isso, é acionada a classe    */

    return td;
}

function validarPaciente(paciente){// Esta função foi criada para validar peso e altura do paciente
    if (validaPeso(paciente.peso)) {//Foi chamada a função de principal.js para validar peso
         return "";
    }else{
        return "Peso inválido";
    }
}
2 respostas

Oi Grasiela, tudo bem?

Normalmente isso dá quando o JS nao encontra algum elemento.

Da uma conferida se os ids e classes do HTML batem com os que voce ta tentando seleciona com os querySelectors no JS?

Espero ter ajudado,

Abcs!

Obrigada!