Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Me indica error que no encuentro al querer agregar paciente a la tabla

Hola. les dejo mi código e imagen para que me puedan ayudar, por favor.

como pueden ver no me deja agregar el paciente a la tabla. Me indica error en el código value. Tampoco funciona el console.log si yo quiero ver si seleccione bien el elemento.

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

JS:

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

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

event.preventDefault();

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 pacienteTr = document.createElement("tr");
var nombreTd = document.createElement("td");
var pesoTd = document.createElement("td");
var alturaTd = document.createElement("td");
 var gorduraTd = document.createElement("td");
 var imcTd = document.createElement("td");


nombreTd.textContent = nombre;
pesoTd.textContent = peso;
alturaTd.textContent = altura;
gorduraTd.textContent = gordura;


pacienteTr.appendChild(nombreTd)
pacienteTr.appendChild(pesoTd)
pacienteTr.appendChild(alturaTd)
pacienteTr.appendChild(gorduraTd)

pacienteTr.appendChild(imcTd)


console.log(pacienteTr);


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

tabla.appendChild(pacienteTr);

});

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>
1 respuesta
solución!

Hola Karina. Pues fijate aqui en esta linea tienes un par de comillas de mas......

 <form" id= "form-adicionar">

Esta seria la linea correcta:

 <form id= "form-adicionar">

Pues ahora si el codigo saldra volando ...... jajajaja. si la respuesta fue la que esperabas marcala como solucionada. Gracias y A seguir programando:...!!!!! Saludos.