Importantísima lección de esta clase, reducir código para que sea mas legible y practico al momento del mantenimiento!!
Copio mi código junto con las notas por si a alguien le sirven!!
var botonAdicionar = document.querySelector("#adicionar-paciente");
botonAdicionar.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector("#form-adicionar") // ahora creamos la variable form para llamar al id creado en el formulario del html
var paciente = capturaDatosPaciente(form); // aca creamos la varibale paciente para que llame a la funcion con parametro del formulario
var tabla = document.querySelector("#tabla-pacientes"); // con esta linea se llama al id del tbody relacionandolo a la variable tabla
var pacienteTr = construirTr(paciente); // aca creamos el objeto pacienteTr y le decimos que tome a la funcion construiTr y como parametro tome al objeto paciente
// ahora lo que necesitamos es crear la fila con los campos correspondientes a lo valores que se ingresen
// para eso necesitamos etiquetas tr(general que contendra a las demas) y etiquetas td(son los campos a ser llenados con los valores ingresados)
tabla.appendChild(pacienteTr); // con esta linea lo que hacemos es decirle a la tabla que nos adopte al pacienteTr creado anteriormente
form.reset(); // esta linea es para que cada vez q se toque el boton de adicionar un paciente se resetee la pagina y no se agregue dos veces por error un paciente
});
function capturaDatosPaciente (form){
// este bloque captura los datos de los formularios
var paciente = {
nombre: form.nombre.value, // lo que se hizo fue crear 4 variables, para que accedan al valor de los objetos dentro de los formularios
peso: form.peso.value, // luego se modifico el codigo para que las varibales sean objetos dentro de la clase paciente
altura: form.altura.value, // por eso van con comas al final y dos puntos en vez de =
gordura: form.gordura.value,
imc: calcularIMC(form.peso.value, form.altura.value) // aca se creo la propiedad imc llamnado a una funcion para que le pase los valores desde el formulario del peso y de la altura
}
return paciente;
}
// aca construimos la funcion construirTr encapsulando las variables, que luego sera llamada en la var pacienteTr
function construirTr (paciente) {
// este bloque es para crear los td y un tr
var pacienteTr = document.createElement("tr");
// al comparar con nuestro codigo nativo de html, a este codigo le faltan las clases
pacienteTr.classList.add("paciente") // con esta linea le decimos a pacienteTr que acceda a classlist y adicione a "paciente"
// ahora tenemos que acceder a los valores que se carguen en la variables y relacionarlas con las etiquetas td nuevas
// lo que hacemos aca es crear la adopcion por parte de paciente de las etiquetas td a traves del metodo appendChild
// asignacion al tr de los td, y a la tabla del tr
pacienteTr.appendChild(construirTd(paciente.nombre,"info-nombre")) // aca le decimos a la variable que tome la funcion y acceda a los valores de paciente.nombre y al vinculo html de info-nombre
pacienteTr.appendChild(construirTd(paciente.peso, "info-peso"));
pacienteTr.appendChild(construirTd(paciente.altura, "info-altura"));
pacienteTr.appendChild(construirTd(paciente.gordura, "info-gordura"));
pacienteTr.appendChild(construirTd(paciente.imc, "info-imc"));
return pacienteTr;
}
function construirTd (dato,clase){ // creamos la funcion para ahorra codigo, pasandole parametros genericos
var td = document.createElement("td") // creamos esta varibale para que contruya un elemento td de la tr
td.classList.add(clase) // aca le decimos al objeto que acceda a la lista y agregue la clase que le pasamos
td.textContent = dato; // aca le asignamos el contendio de texto que se encuentra en dato
return td;
}