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

Problema para adicionar pacientes (Tds)

Estou com um problema ao adicionar uma linha com células de acordo com o preenchimento do formulário. Meu problema é: ao preencher o formulário e clicar em ''adicionar" o site sobrescreve o primeiro paciente e só apresenta o imc calculado na parte onde deveria entrar com a linha e as células. Segue abaixo o código.

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

botao.addEventListener('click',function () {

    event.preventDefault();

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

    var paciente = extraiInfoForm (form);

    var erros = validaPaciente(paciente);

    if (erros.length > 0) {

        exibeMensagemDeErro(erros)
        var mensagemErro = document.querySelector("#mensagem-erro")
        return
    }

    var pacienteTr = montaTr(paciente);

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

    form.reset();
});

function extraiInfoForm (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");

    var nomeTd = montaTd (paciente.nome,"info-nome");
    var pesoTd = montaTd (paciente.peso,"info-peso");
    var alturaTd = montaTd (paciente.altura,"info-altura");
    var gorduraTd = montaTd (paciente.gordura,"info-gordura");
    var imcTd = montaTd (paciente.imc,'info-imc');

    pacienteTr.appendChild (nomeTd);
    pacienteTr.appendChild (pesoTd);
    pacienteTr.appendChild (alturaTd);
    pacienteTr.appendChild (gorduraTd);
    pacienteTr.appendChild (imcTd);

    return pacienteTr;
}

function validaPaciente(paciente) {

    var erros = []

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

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

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

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

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

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

function exibeMensagemDeErro(erros) {
    var ul = document.querySelector("#mensagem-erro");

    ul.innerHTML = ""

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

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

    return td
}
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 nome = paciente.querySelector ('.info-nome').textContent;

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

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

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

    var pesoValido = validaPeso(peso);
    var alturaValida = validaAltura(altura);

    var corErro = 'lightcoral'


    if (!pesoValido) {
        console.log ("Peso invalido, favor verficar informações de peso!")
        pesoValido = false;
        tdImc.textContent = 'Peso invalido!';
        paciente.classList.add("paciente-invalido")
    } 
    if (!alturaValida) {
        console.log ('Altura invalida, favor verificar a informação da altura!')
        alturaValida = false;
        tdImc.textContent = "Altura invalida!";
        paciente.classList.add("paciente-invalido")
    }
     if (pesoValido && alturaValida) {
        imc = calculaImc (peso,altura);
        tdImc.textContent = imc;
    }
}

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

function validaAltura (altura) {
    if (altura >=0 && altura <=2.50) {
        return true
    } else {
        return false 
    }
}

function calculaImc (peso,altura) {

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

3 respostas

Fala ai Rhuan, tudo bem? Tente achar o problema apenas olhando os códigos é bem complicado, isso porque posso deixar passar detalhes facilmente.

Sendo assim, vou te pedir um favor: Compartilha o projeto completo comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Olá, segue o link para acesso ao código:

https://drive.google.com/file/d/1t3VVkoITa5_HrKTWLOlHEeRf4Q9S3wTd/view?usp=sharing

solução!

Fala Rhuan, dei uma olhada no projeto, o problema está na função montaTd, na primeira linha onde tu cria um novo td:

var td = document.querySelector("td");

Repare que você está fazendo um querySelector ao invés do createElement.

Tente mudar para:

var td = document.createElement("td");

Espero ter ajudado.