Erro no console - Function montaTr | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Jaqueline Colares Viegas

| 50.8k xp | 21 posts

var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

var pacientes = document.querySelectorAll(".paciente");

for (var i = 0; i < pacientes.length; i++) {

    var paciente = pacientes[i];

    var tdPeso = paciente.querySelector(".info-peso");
    var peso = tdPeso.textContent;

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdImc = paciente.querySelector(".info-imc");

    var pesoEhValido = true;
    var alturaEhValida = true;

    if (peso <= 0 || peso >= 1000) {
        console.log("Peso inválido!");
        pesoEhValido = false;
        tdImc.textContent = "Peso inválido";
        paciente.classList.add("paciente-invalido");
    }

    if (altura <= 0 || altura >= 3.00) {
        console.log("Altura inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura inválida";
        paciente.classList.add("paciente-invalido");
    }

    if (pesoEhValido && alturaEhValida) {
      var imc = calculaImc(peso, altura);
      tdImc.textContent = imc;
    }

}

function calculaImc(peso, altura){
    var imc = 0;
    imc = peso / (altura * altura);
    return imc.toFixed(2);
}

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 = montaTr(paciente);

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

    tabela.appendChild(pacienteTr);

    form.reset();

});

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

    return td;
}

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

function obtemPacienteDoFormulario(form) {

    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.altura.value, form.peso.value)
    }
}

Ao atualizar o navegador, os dados inseridos no formulário referente ao novo paciente não são inseridos na tabela e no console aparece o seguinte erro:

Uncaught TypeError: Cannot read property 'nome' of undefined at montaTr (form.js:31) at HTMLButtonElement. (form.js:9)

5 respostas

por Marcus Vinicius

| 91.8k xp | 31 posts

17/12/2017

não entendi o pq de vc usar isso:

var paciente = obtemPacienteDoFormulario(form);

E passar os dados do passiente como um objeto. Se vc já esta fazendo a captura dos dados aqui:

var tdPeso = paciente.querySelector(".info-peso");
    var peso = tdPeso.textContent;

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdImc = paciente.querySelector(".info-imc");

Esse objeto com os dados do paciente não é necessário e quando vc faz a chamada:

 pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));

Ele não está chamando o objeto que vc criou.

por Marcus Vinicius

| 91.8k xp | 31 posts

17/12/2017

Dá uma olhada nisso.

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

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

    var paciente = obtemPacienteDoFormulario(form);

    var erros = validaPaciente(paciente);
    if(erros.length > 0){
        exibeMensagemDeErro(erros);
        return;
    }

    adicionaPacienteNaTabela(paciente);

    form.reset();

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

function adicionaPacienteNaTabela(paciente) {
    var pacienteTr = montaTr(paciente);
    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
}

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

por Jaqueline Colares Viegas

| 50.8k xp | 21 posts

17/12/2017

Olá Marcus Vinícius,

Obrigada pelo seu retorno e atenção. O primeiro código está relacionado à montagem da tabela com a validação dos dados e o cálculo do IMC. O segundo código refere-se ao formulário para inserção de novos dados na tabela. Eu montei conforme as orientações do instrutor do curso e não está funcionando. Por isso publiquei aqui, para que alguém que tenha feito o mesmo exercício pudesse enxergar se cometi algum erro no código.

por Marcus Vinicius

| 91.8k xp | 31 posts

17/12/2017

Oi Jaqueline. Depois fui rever o meu código e ele está bem parecido.

tenta trocar no teu código:

var pacienteTr = montaTr(paciente);

por

var pacienteTr = montaTr(pacientes);

solução!

por Jaqueline Colares Viegas

| 50.8k xp | 21 posts

18/12/2017

Eu acho que encontrei o erro, abri o download da aula seguinte com o gabarito e comparei as aulas.

Verifiquei que faltou declarar no final da function "obtemPacienteDoFormulario(form)" a expressão "return paciente;" e no final da function "montaTr(paciente)" a expressão "return pacienteTr;".

Porém continua retornando "NAN" no resultado do IMC do novo paciente inserido na tabela, assim como estava ocorrendo no post da aula anterior que também postei a dúvida aqui.