Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
6
respuestas

fitrar

me tira se lo dejo a bajo esta el error filtrar.js:3 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at filtrar.js:3:13 el código.

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

campoFiltro.addEventListener("input",function(){
    var pacientes = document.querySelectorAll(".paciente");

    if(this.value.length > 0){
        for (var i = 0; i < pacientes.length ; i++){
            var paciente = pacientes[i];
            var tdNombre = paciente.querySelector(".info-nombre");
            var nombre = tdNombre.textContent;
            var expresion = new RegExp(this.value,"i");
            if(!expresion.test(nombre)){
                paciente.classList.add("invisible");
            }else{
                paciente.classList.remove("invisible");
            }   
        }
    }else{
        for (var i = 0; i < pacientes.length ; i++){
            var paciente = pacientes[i];
            paciente.classList.remove("invisible");
        }    
    } 
});
6 respuestas

Hola Sasha, espero que estié bien.

Te pido que compartas todo tu código con nosotros, incluso la parte HTML. Comparto contigo este enlace que puede ayudarte con la solución del problema:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Errors/Unexpected_type

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

html

    <header>
        <div class="container">
            <h1 class="titulo">Buona Vita Nutrición</h1>
        </div>
    </header>

    <main>
        <section class="container">
            <h2>Mis pacientes</h2>

            <label for="filtrarTablas"></label>
            <input type="text" name="filtro" id="filtrarTabla" placeholder="Digitr rl nombre de paciente">

            <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">2.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">73</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.70</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>
                    <tr class="paciente">
                        <td class="info-nombre">Pedro</td>
                        <td class="info-peso">70</td>
                        <td class="info-altura">1.68</td>
                        <td class="info-gordura">23</td>
                        <td class="info-imc">0</td>
                    </tr>
                    <tr class="paciente">
                        <td class="info-nombre">Maria</td>
                        <td class="info-peso">55</td>
                        <td class="info-altura">1.60</td>
                        <td class="info-gordura">17</td>
                        <td class="info-imc">0</td>
                    </tr>
                </tbody>
            </table>
            <button id="buscarPaciente" class="boton btoPrinicipal">Buscar paciente</button>
        </section>
    </main>

    <section class="container">
        <h2 id="titulo-form">Adicionar nuevo paciente</h2>
        <ul id = "mensajes-errores"></ul>

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

form.js

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);
    });
}

eliminar

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

tabla.addEventListener("dblclick", function (event) {
    event.target.parentNode.classList.add("FadeOut");
    setTimeout(function () {
        event.target.parentNode.remove();
    }, 800);
});

calcular

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

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

    var tbPeso = paciente.querySelector(".info-peso");
    var peso = tbPeso.textContent;

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdIMC = paciente.querySelector(".info-imc");


    pesoEsValido = varidarPeso(peso);
    alturaEsValida = varidarAltura(altura);

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

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

    if (pesoEsValido && alturaEsValida) {
        tdIMC.textContent = calcularIMC(peso, altura);
    }
}

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


function varidarPeso(peso) {
    if (peso > 0 && peso < 600) {
        return true;
    } else {
        return false;
    }
}

function varidarAltura(altura) {
    if (altura > 0 && altura < 3.00) {
        return true;
    } else {
        return false;
    }
}

¿Y todo esto se refiere a qué curso y qué clase? Te pregunto porque creaste el tema como Offtopic, así que no tengo forma de saber qué clase generó tu duda.

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