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

innerHTML error null

// botão para adicionar paciente na tabela var botaoAdicionar = document.querySelector("#adicionar-paciente"); botaoAdicionar.addEventListener("click", function(event) { event.preventDefault();

var form = document.querySelector("#form-adiciona")
var paciente = obtemPacienteDoFormulario(form);
var pacienteTr = criaTr(paciente); 
var erros = validaPaciente(paciente);

if(erros.length>0) {
    function exibeMensagensDeErro(erros) {
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });
}

   exibeMensagensDeErro(erros);
    return;
}



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

tabela.appendChild(pacienteTr);

form.reset();

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

});

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 criaTr(paciente) {

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");


    pacienteTr.appendChild(criaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(criaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(criaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(criaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(criaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function criaTd (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("O nome não pode ser em branco");
}

if (paciente.gordura.length == 0) {
    erros.push("A gordura não pode ser em branco");
}

if (paciente.peso.length == 0) {
    erros.push("O peso não pode ser em branco");
}

if (paciente.altura.length == 0) {
    erros.push("A altura não pode ser em branco");
}

if (!validaPeso(paciente.peso)) {
    erros.push("Peso é inválido");
}

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

return erros;

}

function exibeMensagensDeErro(erros) {
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";

    erros.forEach(function(erro) {
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });
}
4 respostas

Boa noite, Luiz! Como vai?

Vc está tendo esse problema em qual parte do seu código? Aparece algum log de erro no console do desenvolvedor do navegador? Se sim, vc poderia colar ele aqui?

Boa Noite, está aparecendo essa mensagem de erro:

form.js:38 Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement. (form.js:38)

solução!

Ja consegui resolver!

segue o código correto

// botão para adicionar paciente na tabela var botaoAdicionar = document.querySelector("#adicionar-paciente"); botaoAdicionar.addEventListener("click", function(event) { event.preventDefault();

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

var paciente = obtemPacienteDoFormulario(form);
var pacienteTr = criaTr(paciente); 
var erros = validaPaciente(paciente);
    console.log(erros);
    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return;
    }



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

tabela.appendChild(pacienteTr);

form.reset();

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

});

function validaPaciente(paciente) {

var erros = [];

if (paciente.nome.length == 0){
    erros.push("O nome não pode ser em branco");
}

if (paciente.gordura.length == 0){
    erros.push("A gordura não pode ser em branco");
}

if (paciente.peso.length == 0){
    erros.push("O peso não pode ser em branco");
}

if (paciente.altura.length == 0){
    erros.push("A altura não pode ser em branco");
}

if (!validaPeso(paciente.peso)){
    erros.push("Peso é inválido");
}

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

return erros;

}

//função que exibe o erro
function exibeMensagensDeErro(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 criaTr(paciente) {

    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");


    pacienteTr.appendChild(criaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(criaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(criaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(criaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(criaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

function criaTd (dado, classe) {

    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

Mto bem, Luiz! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!