1
respuesta

Pequeña mejora en el form.js

Creé una pequeña mejora en el form.js para poder verificar que los datos de peso y altura estén dentro de los parámetros requeridos, se que se puede mejorar mucho, pero esa es la idea, que entre todos opinemos y avancemos

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

    var Tbody=document.querySelector("#tabla-pacientes");
    /*
      capturampos el formulario
    */
    var formulario=document.querySelector("#adicionar");

    /*
   capturamos los valores del formulario
    */
    var nombre=formulario.nombre.value;
    var peso=formulario.peso.value;
    var altura=formulario.altura.value;
    var gordura=formulario.gordura.value;
    /*
     creamos las etiquetas de la tabla para adicionar los datos
    */

    var paciente=document.createElement("tr");
    var nombrePaciente=document.createElement("td");
    var pesoPaciente=document.createElement("td");
    var alturaPaciente=document.createElement("td");
    var gorduraPaciente=document.createElement("td");
    var imcPaciente=document.createElement("td");
    var mensajeError=document.createElement("td");
    /*
     adicionamos la información ingresada en el formulario a las etiquetas de la tabla
    */

     nombrePaciente.textContent=nombre;
     pesoPaciente.textContent=peso;
     alturaPaciente.textContent=altura;
     gorduraPaciente.textContent=gordura;
     /*
       llamamos la funcion calcularImc(); con sus parámetros
     */
     imcPaciente.textContent=calcularImc(peso,altura);


     /*
      agregamos las td a la tr
     */
     paciente.appendChild(nombrePaciente);
     paciente.appendChild(pesoPaciente);
     paciente.appendChild(alturaPaciente);
     paciente.appendChild(gorduraPaciente);
     /*
      Validamos si los valores de peso y altura estan dentro de los parámetros lógicos
     */
     var validWeight=true;
     var validHeight=true;

     if(peso<0 || peso>300 ){
         validWeight=false;

     }
     if(altura<0 || altura>=3){
         validHeight=false;
     }
     /*
        si los valores son correctos agregamos el valor del imc al formulario
     */
     if(validHeight && validWeight){
        paciente.appendChild(imcPaciente);
       /*
          sino ponemos un mensaje con el error
       */
     }else if(validWeight===false){
        mensajeError.textContent="Error en valores de peso";
        mensajeError.classList.add("incorrecto");
        paciente.appendChild(mensajeError);
        console.log(mensajeError);
     }else if(validHeight===false){
        mensajeError.textContent="Error en valores de altura";
        mensajeError.classList.add("incorrecto");
        paciente.appendChild(mensajeError);

     }




     /*
      adicionamos el tr al body de la tabla
     */
     Tbody.appendChild(paciente);

});


var pacientes=document.querySelectorAll(".paciente");

for(var i=0;i<pacientes.length;i++){
    var validHeight=true;
    var validWeight=true;
 var paciente=pacientes[i]; 
 console.log(paciente);  

 var peso=paciente.querySelector(".info-peso");
 var weight=peso.textContent;

 var altura=paciente.querySelector(".info-altura");
 var height=altura.textContent;

 var imc=paciente.querySelector(".info-imc");

    if(weight<0 || weight>500 ){
        validWeight=false;

    } 
    if(height<0 || height>3){
        validHeight=false;

    }
    validarDatos(validWeight,validHeight);

}
function validarDatos(validWeight,validHeight){
    if(validHeight===false){

        imc.innerHTML="valores de altura incorrecto";
        /*
         agregamos color de fondo para indicar error
        */
        paciente.classList.add("incorrecto");

    }
    if(validWeight===false){

        imc.innerHTML="valores de peso incorrecto";
        paciente.classList.add("incorrecto");

    }

    if(validHeight===true && validWeight===true){


        imc.innerHTML=calcularImc(weight,height);

    }
}
1 respuesta

Hola Gilbert, espero que esté bien.

Gracias por compartir tu código con nosotros.

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