Erro Uncaught TypeError: Cannot read property 'querySelector' of undefined at HTMLInputElement.<anonymous> (filtra.js:10) | JavaScript: programando na linguagem da web

Olá.

Meu código está igual ao do instrutor mas está aparecendo esse erro no console mas não consigo encontrar no meu código:

//index.html
<!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">
                <h2 class="titulo">Aparecida Nutrição</h2>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <label for="filtrar-tabela">Filtrar</label>
                <input name="filtro" type="text"
                       class="campo"
                       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.95</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/calcula-imc.js" ></script>
        <script src="js/form.js"></script>
        <script src="js/remover-paciente.js"></script>
        <script src="js/filtra.js"></script>

    </body>
</html>

//filtra.js
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 = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;
            if (nome != this.value) {
                paciente.classList.add("invisivel");
            }else{
                paciente.classList.remove("invisivel");
            }console.log(nome)
        }
    } else{
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
})

Oi! Boa noite,

Acredito que o problema esteja dentro do FOR abaixo:

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");
            }console.log(nome)
        }

Dentro do seu loop, você está dizendo para iterar até seus itens serem menores ou iguais ao pacientes.length, mas lembre-se que um array inicia-se no índice 0, portanto ao final você tenta acessar um índice inexistente. Exemplo do que ocorre:

var array = [1,2,3,4];
array.length; //4

for (var i = 0; i <= array.length; i++) {
    console.log(array[i])
}
//1
//2
//3
//4
//undefined

Faça um teste de mesa, percorrendo mentalmente, ou por escrito, cada item. Exemplo, ao percorrer o primeiro loop, irá imprimir o índice 0,1,2,3,4. Perceba que tenho 5 índices e nao 4 como diz meu array.length, então o correto seria.

var array = [1,2,3,4];
array.length; //4

for (var i = 0; i < array.length; i++) {
    console.log(array[i])
}
//1
//2
//3
//4

Pois estou fazendo o loop, percorrendo enquanto a quantidade for MENOR que meu array.length, pois meu índice 0 também conta.

Espero ter ajudado.

Mergulhe em programação