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

Filtro funciona e não funciona ao mesmo tempo

Boa tarde!

Cheguei até o segundo vídeo, porém ao filtrar os pacientes, só da certo se eu digitar o nome do Paulo. Se eu digitar qualquer outro nome que não esse primeiro da lista, nenhum aparece quando eu digito o nome inteiro.

Não só isso, não aparece apenas o Paulo, aparece a lista inteira! Não sei o que está errado, porque pra mim parece que está igual ao da aula.

Vou passar o meu javascript e a parte referente do meu html:

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

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 = document.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');
        }
    }



})

E aqui o html:

    <main>
        <section class="container">
            <h2>Meus pacientes</h2>
            <label for="filtrar-tabela">Filtre:</label>
            <input type="text" id='filtrar-tabela' name='filtro' 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>

Agradeço a ajuda que tiver!

3 respostas

Fala ai Lucas, tudo bem? Consegue compartilhar o projeto completo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

solução!

Oi, Lucas, tudo bem?

Dei uma olhada e o problema está aqui

var tdNome = document.querySelector(".info-nome");

Ao invés de chamar o document é para ser var tdNome = paciente.querySelector(".info-nome"); chamando a variável paciente.

Assim, a filtragem irá ocorrer normalmente.

Esperamos ter te ajudado!

Muito obrigado! Foi esse detalhe não tão discreto mesmo!

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