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

Problema no Formulário.

Quando coloco dos dados em seus campos: nome, altura peso...etc e clico em adicionar, é adicionado o novo paciente normalmente. O problema é que o primeiro paciente que estava no topo desaparece. É como tivesse sido excluído.


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

botaoAdicionar.addEventListener("click",function(event){

  event.preventDefault();


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


var paciente = obtemPacienteDoFormulario(form);
console.log(paciente);

var pacienteTr = montaTr(paciente);


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

tabela.appendChild(pacienteTr);
form.reset();



});


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


function montaTd(dado,classe){

    var td = document.querySelector("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;

}
4 respostas

Boa tarde, Felipe! Como vai?

Na sua função montaTd() vc está fazendo:

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

O document.querySelector("td") vai pegar o primeiro elemento td do seu código e sobrescrever ele, por isso que a sua primeira linha da tabela está sumindo. Faça assim e veja se resolve o seu problema:

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

Grande abraço e bons estudos!

solução!

Oi Felipe, acho que o problema é que você está usando o querySelector pra montar a td. Isso vai fazer com que a primeira td seja sempre pega. Ai você de certa forma tá fazendo a troca de um paciente por outro.

Troca o querySelector pelo createElement no montaTd pra ver se resolve?

Obrigado Gabriel e Wanderson. Como esse erro não aparece no console do navegador, tive dificuldade em achar esse detalhe. Eu não estava criando uma nova td, eu estava "capturando". Muito obrigado.

Ótimo Felipe! Qualquer dúvida estamos aqui!