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

Duda sobre innerHTML

No entiendo bien que es lo que hace el inner.HTML. Entiendo que modifica el HTML interno del elemento. En el ejemplo tengo un "ul" (lista) que tiene adentro los mensajes "li". Que es lo que hace cuando hacemos ul.innerHTML = "";?. No entiendo mucho de HTML y se me complica verlo. Pego abajo el código del ejercicio que se hizo en la clase. Hay dos en el código, pero por ejemplo la de la ultima función exhibirMensajesErrores(), Gracias!

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

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){

    //captura 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"); 

    //Asignacion al Tr los Td, y a la tabla el Tr
    pacienteTr.appendChild(construirTd(paciente.nombre,"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){

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

    var errores=[];

    if(paciente.nombre.length == 0){
        errores.push("El nombre no puede estar vacío");
    }
    if(paciente.peso.length == 0){
        errores.push("El peso no puede estar vacío");
    }
    if(paciente.altura.length == 0){
        errores.push("La altura no puede estar vacía");
    }
    if(paciente.gordura.length == 0){
        errores.push("El %gordura no puede estar vacío");
    }
    if(!validarPeso(paciente.peso)){
        errores.push("El peso es incorrecto");
    }
    if(!validarAltura(paciente.altura)){
        errores.push("La altura es incorrecta");
    }
    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);
    });
}
1 respuesta
solución!

Hola Julian

En este ejemplo estamos validando formularios, entonces, por ejemplo cuando el usuario deja de llenar un campo, el sistema envia un mensaje para el usuario informando que el campo debe ser llenado. Lo que hace li.innerHTML = " " es mantener ese mensaje de error oculto hasta que se de la condición del usuario no llenar el campo, para mostrar el error.

Te recomiendo revisar este material https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML

te yudará a entender como funciona esa propiedad.

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