Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Reduciendo el código!!!

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;
}
1 respuesta
solución!

Hola Marcos

Gracias por tu aporte y compartir tu código, está muy bien felicitaciones.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios