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