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

Paciente não é adicionado e formulário reseta automaticamente

Depois da refatoração do código em métodos, quando clico no botão, o paciente não é adicionado e o formulário reseta.

Arquivo form.js:

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

botao.addEventListener("click", function(event) {
    event.preventDefault();

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

    var paciente = obtemFormulario(form);

    var pacienteTr = montaTr(paciente);

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

    tabela.appendChild(pacienteTr);

    form.reset();

});

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

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

    return pacienteTr;

}

Arquivo calcula-imc.js

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

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

for(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 pesoValido = true;
    var alturaValida = true;

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

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

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

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

Boa tarde, João! Como vai?

Aparece algum erro no console do desenvolvedor do navegador? Se sim, vc poderia colar o log aqui para eu dar uma olhada?

Além disso, poderia tbm compartilhar o código completo, tanto JS quanto HTML?

Assim poderei dar uma olhada mais aprofundada no que está acontecendo e poderei te ajudar!

Aguardo teu retorno para juntos chegarmos à luz do conhecimento!

Grande abraço e bons estudos, meu aluno!

solução!

Olá Gabriel Leite,

Sim, no console havia um erro - Uncaught SyntaxError: Invalid shorthand property initializer

Fui analisar com mais calma o código e percebi o erro a partir da linha 23 do arquivo form.js:

       peso = form.peso.value,
        altura = form.altura.value,
        gordura = form.altura.value,
        imc = calculaImc(form.peso.value, form.altura.value)

Estava usando o sinal de = para atribuir os valores nos objetos. Corrigido para:

       nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        imc: calculaImc(form.peso.value, form.altura.value)

Agora funciona normalmente. Muito obrigado!

Boa, João! Mandou bem, meu aluno!

O aprendizado que fica é: sempre que sua página não estiver funcionando da forma como vc esperava, já dá uma olhada no console do navegador pra ver se tá sendo lançado algum erro lá! O developer tools é um grande amigo do desenvolvedor!

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

Grande abraço e bons estudos!