Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Tabla pacientes.

por Estudiante
| 68k xp | 97 posts

Hola, en la consola me indica que hay un error en la function donde se encuentra form.nombre.value, yo no encuentro el error ¿En que me estoy equivocando? Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

HTML: 

</head>
<body>

    <header>
        <div class="container">
            <h1 class = "titulo">Buona Vita Nutrición</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Mis pacientes</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Peso(kg)</th>
                        <th>Altura(m)</th>
                        <th>Gordura Corporal(%)</th>
                        <th>IMC</th>
                    </tr>
                </thead>
                <tbody id="tabla-pacientes">
                    <tr class="paciente">
                        <td class="info-nombre">Pablo</td>
                        <td class="info-peso">100</td>
                        <td class="info-altura">6.00</td>
                        <td class="info-gordura">10</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nombre">Juan</td>
                        <td class="info-peso">80</td>
                        <td class="info-altura">1.72</td>
                        <td class="info-gordura">40</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente" >
                        <td class="info-nombre">Erica</td>
                        <td class="info-peso">54</td>
                        <td class="info-altura">1.64</td>
                        <td class="info-gordura">14</td>
                        <td class="info-imc">0</td>
                    </tr>

                    <tr class="paciente">
                        <td class="info-nombre">Diego</td>
                        <td class="info-peso">85</td>
                        <td class="info-altura">1.73</td>
                        <td class="info-gordura">24</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente" >
                        <td class="info-nombre">Tatiana</td>
                        <td class="info-peso">46</td>
                        <td class="info-altura">1.55</td>
                        <td class="info-gordura">19</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>

        </section>
    </main>

    <section class="container">
        <h2 id="titulo-form">Adicionar nuevo paciente</h2>
        <form id= "form-adicionar">
            <div class="grupo">
                <label for="nombre">Nombre:</label>
                <input id="nombre" name="nombre" type="text" placeholder="digite el nombre del paciente" class="campo">
            </div>
            <div class="grupo">
                <label for="peso">Peso:</label>
                <input id="peso" name="peso" type="text" placeholder="digite el peso del paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="altura">Altura:</label>
                <input id="altura" name="altura" type="text" placeholder="digite la altura del paciente" class="campo campo-medio">
            </div>
            <div class="grupo">
                <label for="gordura">% de Gordura:</label>
                <input id="gordura" type="text" placeholder="digite el porcentaje de gordura del paciente" class="campo campo-medio">
            </div>
            <button id="adicionar-paciente" class="boton bto-principal">Adicionar</button>
        </form>
    </section>
</body>

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

botonAdicionar.addEventListener("click", function(event){ 

event.preventDefault();

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

var paciente = capturarDatosPaciente(form); console.log(paciente);

// crear etiqeutas Tds y tr
var trPaciente = document.createElement("tr");
var tdNombre = document.createElement("td");
var tdPeso = document.createElement("td"); 
var tdAltura = document.createElement("td");
var tdGordura = document.createElement("td")
var tdImc = document.createElement("td");

//asignar los valores a la propiedad textcontent
tdNombre.textContent = paciente.nombre;
tdPeso.textContent = paciente.peso;
tdAltura.textContent = paciente.altura;
tdGordura.textContent = paciente.gordura;
tdImc.textContent = calcularImc(peso,altura);

// asignacion al tr de los td, y la tabla el tr
trPaciente.appendChild(tdNombre);
trPaciente.appendChild(tdPeso);
trPaciente.appendChild(tdAltura);
trPaciente.appendChild(tdGordura);
trPaciente.appendChild(tdImc);

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

});

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

2 respuestas
por Estudiante
| 68k xp | 97 posts

y si quito var en las function aun asi no funciona porque pongo console.log(paciente) y no me indica nada.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 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 } return paciente; }

por SASHA AYLÉN CABEZAS PALMEYRO
| 134.5k xp | 36 posts

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

botonAdicionar.addEventListener("click", function (event) { event.preventDefault();

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


var errores = validarPaciente(paciente);
 if(errores.length > 0){
    exhibirMsjErrores(errores);
    return;
}


adicionarPacienteEnLaTabla(paciente);
form.reset();

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

});

function adicionarPacienteEnLaTabla(paciente) { var pacienteTr = construirTr(paciente); var tabla = document.querySelector("#tabla-pacientes"); tabla.appendChild(pacienteTr); }

function capturarDatosPaciente(form) { 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"); 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ío");
}

if (paciente.gordura.length == 0) {
    errores.push(" El %gordura no puede estar vacío");
}

if (!varidarPeso(paciente.peso)) {
    errores.push("El peso es incorrecto");
}

if (!varidarAltura(paciente.altura)) {
    errores.push("La altura es incorrecta");
}
return errores;

}

function exhibirMsjErrores(errores) { var ul = document.querySelector("#mensajes-errores"); ul.innerHTML = ""; errores.forEach(function (error) { var li = document.createElement("li"); li.textContent = error; ul.appendChild(li); }); }