Solucionado
Boa noite!
Minha tabela esta funcionando perfeitamente, mas quando altero o nome lá no HTML incluindo o sobrenome ou um nome composto, o filtro não retorna o paciente cadastrado.
Mas quando eu insiro um nome composto pelo 'Adicionar novo paciente', da certo!
Porquê? Alguém poderia me explicar?
Obrigado :)
hoje, com a Alura e o Google Gemini
Olá, testei no meu agora e funcionou normal. Coloquei direto o nome composto e nome e sobrenome no HTML e apareceu na tabela perfeitamente
Olá, Daniel!
Você poderia enviar os seus aquivos HTML e JS para descobrirmos por que isso está acontecendo? Eu também testei aqui e funcionou normalmente.
Fico no aguardo!
Olá boa noite!
Seguem os códigos - 1º) html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Thaís Lopes Nutricionista Esportiva</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">
🕮 <!--emoji-book-->
<h1 class="titulo">Thaís Lopes Nutricionista Esportiva</h1>
® <!--symbol-register-->
</div>
</header>
<main>
<section class="container"><br>
<h2>Meus pacientes 🍉</h2> <!--emoji-watermelon-->
<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">Anita</td>
<td class="info-peso">45</td>
<td class="info-altura">1.75</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Daniel</td>
<td class="info-peso">64</td>
<td class="info-altura">1.70</td>
<td class="info-gordura">9</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Pedro</td>
<td class="info-peso">35</td>
<td class="info-altura">1.50</td>
<td class="info-gordura">8</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">Andrea</td>
<td class="info-peso">58</td>
<td class="info-altura">1.66</td>
<td class="info-gordura">16</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Silvia</td>
<td class="info-peso">87</td>
<td class="info-altura">1.34</td>
<td class="info-gordura">22</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">62</td>
<td class="info-altura">1.65</td>
<td class="info-gordura">15</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"><br><br>
<h2 id="titulo-form">Adicionar novo paciente 🚀</h2> <!--emoji-rockets-->
<ul id="mensagens-erro">
</ul>
<form id="form-adiciona">
<div class="grupo">
<label for="nome">Nome Completo:</label>
<input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
</div>
<div class="grupo">
<label for="peso">Informe o seu 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">Informe a sua 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" 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="C:\Users\Daniel Sonobe\Tutorial\principal.js"></script>
<script src="C:\Users\Daniel Sonobe\Tutorial\form.js"></script>
<script src="C:\Users\Daniel Sonobe\Tutorial\remover-paciente.js"></script>
<script src="C:\Users\Daniel Sonobe\Tutorial\filtra.js"></script>
</body>
</html>
2º) 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");
}
}
}else {
for (var i= 0; i < pacientes.length; i++){
var paciente = pacientes[i];
paciente.classList.remove("invisivel");
}
}
});
Olá, Daniel, se eu entendi bem seu problema, por algum motivo seu programa não está lendo corretamente o nome dos pacientes (compostos) que já vêm no HTML, porque eles não aparecem quando você digita o nome deles no filtro, correto?
Bem, eu testei seu código aqui e funcionou, então vamos tentar entender o que está acontecendo aí!
Para fazer um teste, mude o nome da última paciente para "Tatiana Morais". Seu código deve ficar assim no HTML:
<td class="info-nome">Tatiana Morais</td>Agora, troque seu código do arquivo filtra.js para o seguinte:
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");
}
}
// Linhas adicionadas:
console.log(nome);
console.log(this.value);
console.log(nome != this.value);
} else {
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
paciente.classList.remove("invisivel");
}
}
});Eu adicionei 3 linhas depois do primeiro for. Agora vou te pedir para atualizar a página e tentar realizar a busca pela Tatiana Morais. Assim que digitar o nome completo no campo do filtro, pode mandar aqui as últimas 3 linhas do seu console?
O resultado que deveríamos esperar é o seguinte:
Se o seu paciente não está sendo filtrado, então por algum motivo o texto do HTML e o texto digitado no campo de filtro não estão batendo. Vamos realizar esse teste pra descobrir o que está acontecendo!
Fico no aguardo :)
Bom dia Antonio
Deu certo por aqui! Dá uma olhadinha nos retornos
Inclusive testei outros sobrenomes e ele retorna direitinho. Sucesso!
Mais uma vez obrigado Antonio.
Um forte abraço!