Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema com Filtro - Apagar

Bom dia, abaixo segue o meu código, e abaixo dele a que consta em aula. Quando utilizo o meu código, não está apagando, e estou revisar aqui linha a linha e não consegui identificar o problema. Quando utilizo o que foi psotado em aula, funciona normalmente. Poderiam me auxiliar?

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

    if(this.value.lenght > 0){    
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;            
            if(nome != this.value){
                paciente.classList.add("invisivel");                
            } else {
                paciente.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < pacientes.length; i++) {
           var paciente = pacientes[i];
           paciente.classList.remove("invisivel");            
        }
    }
});
campoFiltro.addEventListener("input", function(){
    console.log(this.value);
    var pacientes = document.querySelectorAll(".paciente");

    if (this.value.length > 0){
        for (var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            if (nome != this.value){
                paciente.classList.add("invisivel");
            } else {
                paciente.classList.remove("invisivel");
            }
        }
    } else {
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
});
3 respostas

Oi, Diego, tudo bem?

No console do navegador é apresentado alguma mensagem de erro? Caso queira por o seu html aqui, iria ajudar a identificar. Aguardamos :}

Oi, Laís. Tudo ótimo, e contigo? Segue abaixo o meu código HTML. Sobre o navegador, quando executo o meu código, não retorna nenhuma mensagem de erro. Tentei fazer um comparativo de códigos entre o que foi postado, e o meu, e não encontrei nada diferente, porém o que foi postado em aula funciona.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <header>
            <div class="container">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <label for="filtrar-tabela">Filtre:</label>
                <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do paciente">
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" id="primeiro_paciente" >
                            <td class="info-nome">Paulo</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-nome">João</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-nome">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-nome">Douglas</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-nome">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 novo paciente</h2>
            <ul id="mensagens-erro">                
            </ul>
            <form id="form-adiciona">
                <div class="grupo">
                    <label for="nome">Nome: </label>
                    <input id="nome" name="nome" type="text" placeholder="Digite o nome do seu paciente" class="campo">
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="altura">Altura:</label>
                    <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" name="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                </div>
                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>            
        </section>
        <script src="js/calculaImc.js"></script>
        <script src="js/form.js"></script>
        <script src="js/removerPaciente.js"></script>
        <script src="js/filter.js"></script>
    </body>
</html>
solução!

Olá, boa tarde.

Já consegui identificar o problema. No trecho abaixo do meu código, eu acabei escrevendo "lenght" ao invés de "length".

Obrigado.

if(this.value.lenght > 0){ 

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software