2
respuestas

Duda click

Hay veces que el boton se presiona pero no responde y hace falta apretarlo de nuevo para que adicione el paciente. Alguien sabe porque es esto?

2 respuestas

Si me funciono, tal vez sea algo de tu codigo. si lo muestras es mas facil saber que pasa.

Pues le sucede a Christian en el video. Si te soy honesto, me he limitado a seguirlo.

form.js


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


    botonAdicionar.addEventListener("click", function(event){
    event.preventDefault();
    var form = document.querySelector("#form-adicionar");
    var paciente = capturarDatosPaciente(form);
    var pacienteTr = construirTr(paciente);
    var errores = validarPaciente(paciente);

    if(errores.length > 0){
        exhibirMensajesErrores(errores);
        return;
    }

    var tabla = document.querySelector("#tabla-pacientes");
    tabla.appendChild(pacienteTr);
    form.reset();

    var mensajesErrores = document.querySelector("#mensajes-errores")
    mensajesErrores.innerHTML = ""

    });


    function capturarDatosPaciente(form){
        //capturando los datos del formulario
        var paciente = {
             nombre: form.nombre.value,
             peso: form.peso.value,
             altura: form.altura.value,
             gordura: form.gordura.value,
             imc: calcularIMC(form.peso.value, form.altura.value)
        }
        return paciente;
    }

    function construirTr(paciente){

        var pacienteTr = document.createElement("tr");
        pacienteTr.classList.add("paciente");

        //Añadir  los tds al tr.
        pacienteTr.appendChild(construirTd(paciente.nombre, "info-nombre"));
        pacienteTr.appendChild(construirTd(paciente.altura, "info-altura"));
        pacienteTr.appendChild(construirTd(paciente.peso, "info-peso"));
        pacienteTr.appendChild(construirTd(paciente.gordura, "info-gordura"))
        pacienteTr.appendChild(construirTd(paciente.imc, "info-imc"))

        return pacienteTr
    }

    function construirTd(dato,clase){
        var td = document.createElement("td");
        td.classList.add(clase);
        td.textContent = dato;
        return td
    }

    function validarPaciente(paciente){
        var errores = [];
        if(!validarPeso(paciente.peso)){
            errores.push("Peso incorrecto");
        } 
        if(!validarAltura(paciente.altura)){
            errores.push("Altura incorrecta");
        }
        if(paciente.nombre.length == 0){
            errores.push("El nombre no puede estar vacio");
        } 
        if(paciente.peso.length == 0){
            errores.push("El peso no puede estar vacio");
        } 
        if(paciente.altura.length == 0){
            errores.push("La altura no puede estar vacia");
        } 
        if(paciente.gordura.length == 0){
            errores.push("El porcentaje de gordura no puede estar vacio");
        } 
        return errores
    }

    function exhibirMensajesErrores(errores){
        var ul = document.querySelector("#mensajes-errores");
        ul.innerHTML = ""

        errores.forEach(function(error){
            var li = document.createElement("li");
            li.textContent = error;
            ul.appendChild(li);
        });
    }

calcularIMC.js

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

for(var i = 0; i < pacientes.length; i++){

    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");
    var imc = peso / (altura * altura);
    tdIMC.textContent = imc;

    pesoEsValido = validarPeso(peso);
    alturaEsValida = validarAltura(altura)


    if(!pesoEsValido){
        console.log("Peso incorrecto");
        tdIMC.textContent = "Peso incorrecto";
        pesoEsValido = false;
        paciente.classList.add("paciente-incorrecto");
    }

    if(!alturaEsValida){
        console.log("Altura incorrecta");
        tdIMC.textContent = "Altura incorrecta"
        alturaEsValida = false;
        paciente.classList.add("paciente-incorrecto");

    }


    if(pesoEsValido && alturaEsValida){

        tdIMC.textContent = calcularIMC(peso,altura)

    }
}

function calcularIMC(peso,altura){
    var imc = peso / (altura*altura);
    return imc.toFixed(2);
}

function validarPeso(peso){
    if(peso >= 0 && peso < 1000){
        return true;
    } else{
        return false;
    }
}

function validarAltura(altura){
    if(altura >= 0 && altura < 3){
        return true;
    } else{
        return false;
    }
}

Ese error lo note en el minuto 6:04 del video Validando el restante de los campos

Me pasa de repente igual, pero al volver a clickear ya reacciona como es esperado.