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

Erro no appendChild()

form.js

var btn_adicionar = document.querySelector("#adicionar-paciente");
btn_adicionar.addEventListener("click", function () {
    event.preventDefault(); /* Previne o comportamento padrão do evento; */
    //console.log("Fui cliclado!");

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

    var paciente = obterPaciente(form);
    var pacienteTr = criarTr(paciente);

    if (!validarPaciente(paciente)) {
        console.log("Paciente inválido!");
        return;
    }

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

    form.reset();
});

//Obtém as informações do paciente - Form;
function obterPaciente(form) {
    var paciente = {
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calcularImc(form.peso.value, form.altura.value)
    }
    return paciente;
}

//Criar/Adicionar o paciente a tabela;
function criarTr(paciente) {
    var paciente_tr = document.createElement("tr");
    paciente_tr.classList.add("paciente");

    paciente_tr.appendChild(criarTd(paciente.nome, "info-nome"));
    paciente_tr.appendChild(criarTd(paciente.peso, "info-peso"));
    paciente_tr.appendChild(criarTd(paciente.altura, "info-altura"));
    paciente_tr.appendChild(criarTd(paciente.gordura, "info-gordura"));
    paciente_tr.appendChild(criarTd(paciente.imc, "info-imc"));

    return paciente_tr;
}

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

    return td;
}

function validarPaciente(paciente) {
    if (validarPeso(paciente.peso)) {
        return true;
    } else {
        return false;
    }
}

imc.js

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

for (var i = 0; i < pacientes.length; i++) {
    //console.log(pacientes[i].textContent);

    var paciente = pacientes[i];

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

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

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


    var peso_valido = validarPeso(peso);
    var altura_valida = validarAltura(altura);


    if (!peso_valido) {
        //console.log('Peso inválido!');
        peso_valido = false;
        imc_paciente.textContent = "Peso inválido!";
        paciente.classList.add("campo-invalido");
    }

    if (!altura_valida) {
        //console.log('Altura inválida!');
        altura_valida = false;
        imc_paciente.textContent = "Altura inválida!";
        paciente.classList.add("campo-invalido");
    }

    if (peso_valido && altura_valida) {
        var imc = calcularImc(peso, altura);
        imc_paciente.textContent = imc;
    }
}

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

};

function validarPeso(peso) {
    if (peso >= 0 && peso < 1000) {
        return true;
    } else {
        return false;
    }
}

function validarAltura(altura) {
    if (altura >= 0 && altura <= 3.0) {
        return true;
    } else {
        return false;
    }
}

Erro no console: Uncaught ReferenceError: paciente_tr is not defined at HTMLButtonElement. (form.js:17)

O trecho de código abaixo não funciona após o if, apenas quando inserido na function criarTr(paciente).

var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(paciente_tr);
3 respostas
solução!

Olá Stéphanie, tudo bem? Eu acho que o acontece é o seguinte:

Aqui você atribuiu o retorno de criarTr(paciente) para a variável pacienteTr:

 var pacienteTr = criarTr(paciente);

E aqui você envia para a função appendChild um objeto de nome paciente_tr:

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

Neste momento da execução do código, paciente_tr não existe. Tente alterar o nome de paciente_tr para pacienteTr e ai faz o teste novamente para a gente verificar se é isso.

Espero poder ter ajudado.

Muito obrigado!

Jailson você é um ninja! hahaha Muito obrigada! Era isso mesmo :)

Imagina! Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software