Tabela adicionando os mesmos registros mais de uma vez

Oi, Vanderson, tudo bem?

Coloca aqui o teu código do form para que possa testar e entender o que pode estar acontecendo. Aguardo :}

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

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

    var nome= form.nome.value;
    var peso= form.peso.value;
    var altura= form.altura.value;
    var gordura= form.gordura.value;

    //Criando uma tabela no documento 

    var pacienteTr = document.createElement("tr");

    //Criando cada linha no documento html
    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");


    //Adicionando os dados capturados nas linhas;

    nomeTd.textContent= nome;
    pesoTd.textContent= peso;
    alturaTd.textContent= altura;
    gorduraTd.textContent= gordura;


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

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

    tabela.appendChild(pacienteTr);
});

Gostaria de mandar um print da tela, mas creio que a plataforma da Alura não tem esta opção...

Oi, Vanderson!

O erro que obtive testando o seu código foi que você declarou o botaoAdcionar.addEventListener("click", function(event) faltando um i em Adicionar, mas consertando isso, os registros na tabelas foram corretamente.

Você pode dar um print, adicionar aqui: https://imgur.com/ e depois compartilhar o link da imagem.

Meu condigo está adicionando os elementos na tabela, mas ele está adicionando o mesmo registro mais de uma vez. Se testar o código abaixo verá que ele irá inserir uns 5 registros na tabela com a mesma informação digitada no form. Segue o código

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


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

    var nome = form.nome.value;
    var peso = form.peso.value;
    var altura = form.altura.value;
    var gordura = form.gordura.value;



    var pacienteTr = document.createElement("tr");

    var nomeTd = document.createElement("td");
    var pesoTd = document.createElement("td");
    var alturaTd = document.createElement("td");
    var gorduraTd = document.createElement("td");
    var imcTd = document.createElement("td");

    nomeTd.textContent = nome;
    pesoTd.textContent = peso;
    alturaTd.textContent = altura;
    gorduraTd.textContent = gordura;

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

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

    tabela.appendChild(pacienteTr);

Bom dia a todos, fazendo uma revisão no código, identifiquei o problema de no momento em que adicionamos um paciente ,ele insere mais de um registro(Tr). O problema está. é que o código para adicionar um paciente está dentro do "for", com isso ele faz uma repetição do for e adiciona um registro para cada vez que ele passar no for. Solução, remover o código de adicionar paciente de dentro do bloco do for e colocar for do bloco for, ou colocar em um arquivo separado.

Leandro Cardoso, vc poderia explicar melhor a solucao para o problema (ou colar a solucao do codigo)? Nao ficou muito claro pra mim. Obrigada

Pamela bom dia, posso sim! Eu verifique que o código que adiciona o paciente está dentro do bloco de código do laço "for", com isso toda vez que eu criava uma paciente na tabela ele adicionava 5 iguais. Isso parou pois removi o código que adiciona o paciente de dentro do bloco for.

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 pesoValido = validaPeso(peso);
    var alturaValida = validaAltura(altura);

    if(!pesoValido){
        pesoValido = false;
        tdImc.textContent= "Peso inválido!";
        paciente.style.backgroundColor = "lightcoral";
        paciente.classList.add("paciente-ivalido");
    }
    if(!alturaValida){
        alturaValida = false;
        tdImc.textContent ="Altura inválida!";
        paciente.classList.add("paciente-ivalido");
    }

    if(pesoValido && alturaValida){
        var imc = calculaImc(peso, altura)
        tdImc.textContent = imc;
    }
O CÓDIGO QUE ADICIONA PACIENTE  ESTAVA AQUI...
}//encerramento do bloco for

O código que adiciona tem que estar aqui , fora desse bloco for, deu pra entender?