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";
}
}