2
respuestas

Ayudaa, no me agrega nuevos pacientes

Hola buenos dias necesito de su ayudaa. He revisado varias veces mi codigo y no encuentro el error. Al momento de agregar un nuevo paciente, no se ve reflejado en el cuadro :( Este es el codigo del archivo llamado form.js

var botonAdicionar = document.querySelector("#adicionar-paciente");

//este archivo se va a poner todas las funcionalidades del formulario

botonAdicionar.addEventListener("click",function(event){
    event.preventDefault(); //la funcion prevent.Default significa prevenir que se sobrecargue o se reinicie  la pagina 

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

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

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


    //para hacer que se cargue la informacion en  el cuadro, se debe crear una funcion llamada createElement("tr"); esta pertenece a document, y se pone document.createElement("tr"); porque se van a crear objetos de html y se van a pasar a Java
    pacienteTr = document.createElement("tr");
    nombreTd = document.createElement("td"); //td son los campos que se requieren para llenar el formulario 
    alturaTd = document.createElement("td");
    pesoTd = document.createElement("td");
    gorduraTd = document.createElement("td");
    imcTd = document.createElement("td");

    nombreTd.textContent = nombre; //para cargar los valores al formulario en cada una de las 5 etiquetas se utiliza la etiqueta .textContent
    alturaTd.textContent = altura;
    pesoTd.textContent = peso;
    gorduraTd.textContent = gordura;
    imcTd.textContent = calcularIMC(peso,altura);

    pacienteTr.appendChild(nombreTd); // para asociar las etiquetas creadas al formulario,juntarlas a las que tienen "td" y para que queden en el mismo grupo "tr" se debe poner pacienteTr.appendChild(nombre o dato que se requiere y pegado se pone Td);
    pacienteTr.appendChild(pesoTd);
    pacienteTr.appendChild(alturaTd);
    pacienteTr.appendChild(gorduraTd);
    pacienteTr.appendChild(imcTd);

    tabla.appendChild(pacienteTr);


});

Y ESTE ES EL CÓDIGO PARA EL CALCULO DE IMC

//En este archivo esta solo el calculo del IMC
var pacientes = document.querySelectorAll(".paciente");

for (var i = 0;i< pacientes.length;i++){ //para hacer que se calcule el IMC en todos los participantes, se debe hacer uso de loops o iteraciones que ayudan a repetir instrucciones, en este caso utilizamos el ciclo for 
    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");


    pesoEsValido = true;
    alturaEsValida = true;

    //para hacer validacion de datos y que sean coherentes en la tabla al momento de digitar, se debe implementar condicionales if, else
    if((peso < 0) || (peso > 1000)){   //las barras rectas indican "o" u "or" como se dice en ingles
        console.log("Peso Incorrecto");
        tdIMC.textContent = "Peso Incorrecto"
        pesoEsValido = false;
        paciente.classList.add("paciente-incorrecto"); //la funcion classList.add permite traer un codigo definido de la carpeta css, en la cual ya se definio el color previamente 
        //paciente.style.backgroundColor = "orange" // la funcion style.color = "red" sirve para marcar el texto de un color o si se quiere colorear la linea, se pone style.backgroundColor
    }

    if((altura < 0) || (altura > 3.000)){   
        console.log("Altura Incorrecta");
        tdIMC.textContent = "Altura Incorrecta"
        alturaEsValida = false;
        paciente.classList.add("paciente-incorrecto");
        //paciente.style.backgroundColor = "orange" 
    }

    //Esta condicion && significa que las condiciones deben ser verdaderas para que el resultado sea verdadero o se cumpla, de lo contrario no lo hace 
    // si una condicion es verdadera y la otra falsa el resultado será falso
    if (pesoEsValido && alturaEsValida){

        tdIMC.textContent = calcularIMC(peso,altura);

    }


} 

function calcularIMC(peso,altura){ //para que se pueda realizar el calculo del IMC tambien en los datos que se agrreguen, se pone una funcion por fuera del loop del if
    var imc = peso / (altura * altura);
    return imc.toFixed(2);  //imc.toFixed(2); // para hacer que el resultado del calculo del IMC no de con tantos decimales, se pone.. toFixed(2) dentro del parentesis se pone la cantidad de decimales que uno quiere 
}

Estaré pendiente. Gracias

2 respuestas

Hola Stefania, verifica como estás llamando a los archivos JS en el documento HTML o compartenos el código de HTML. Un saludo

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Hola, Stefanía, el punto y coma (;) de la última línea del código form.js no me calza.

Saludos y espero que hayas podido resolverlo... si no, ojalá que te sirva esta ayuda.

Y...nada, olvida lo anterior. Acabo de hacerlo con mi código y da lo mismo, funciona igual.