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!