var filtro = document.querySelector(".filtro")
filtro.addEventListener("input", function(){
console.log(this.value) // this: o elemento relacionado, neste caso o filtro.
var pacientes = document.querySelectorAll(".paciente")
var value = filtro.value
if(value.length > 0 ){
pacientes.forEach(function(paciente){ // obrigatorio o uso do argumento (ele vai ser o elemento que estiver passando na hora)
var nometd = paciente.querySelector(".info-nome")
var nome = nometd.textContent
if(nome == value){
paciente.classList.remove("invisivel") }
else{
paciente.classList.add("invisivel") } }) }
else{
pacientes.forEach(function(paciente){
paciente.classList.remove("invisivel")
})
}
})
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas
respostas
a filtragem nao funciona
Olá, Kayke, tudo bem?
Testei o seu código aqui e ele funcionou normalmente! O problema pode estar em outro lugar.
Assim que digitar o nome de alguém no campo do filtro, você pode inspecionar o elemento HTML na página e ter certeza se as tr .paciente realmente não estão recebendo a classe invisivel. Se eles estiverem recebendo a classe e mesmo assim não estão ficando invisíveis, então provavelmente não estão recebendo o estilo do CSS, então você poderia verificar lá nesse arquivo.
Mas se não estão recebendo essa classe, então houve algum erro ao adicionar a classe nos pacientes no código JS. Você pode verificar se realmente os pacientes estão sendo selecionados, então dentro do forEach você pode escrever console.log(paciente):
pacientes.forEach(function (paciente) { // obrigatorio o uso do argumento (ele vai ser o elemento que estiver passando na hora)
console.log(paciente);
// Restante do código...
})Agora, ao digitar "Erica" no filtro, as últimas linhas no console deveriam ser essas:
Se não aparecer isso, poderia mostrar um print do seu console depois de realizar essas etapas?
Sinta-se à vontade para depurar outras partes do código também! É importante treinarmos o raciocício de fluxo do código, assim que descobrimos os bugs! Mas não hesite em recorrer à gente caso não encontre a solução, estamos aqui para isso :)
Fico no aguardo!
Olá, Antonio Evaldo muito Obrigado pela atenção .
Então na verdade eles ficam ivisiveis, mas, quando eu escrevo "Paulo" por exemplo o paciente Paulo continua invisivel, dei uma olhada pelo console e a clase paciente invisivel nao esta sendo removida. ja tentei algumas modificações no codigo mais ainda nada.
Olá novamente, Kayke!
Entendi seu problema agora! Antes uma pergunta: quando você apaga tudo no campo de filtragem, os pacientes voltam a aparecer?
De qualquer forma, o problema deve ser que o seu código não está alcançando a linha paciente.classList.remove("invisivel") dentro do segundo if! Para depurar seu código, vamos então adicionar os seguintes console.log antes desse if:
// Consoles adicionados:
console.log(nome);
console.log(value);
console.log(nome == value);
if (nome == value) {
paciente.classList.remove("invisivel")
}
else {
paciente.classList.add("invisivel")
}Vamos imprimir no console o nome no paciente, o valor no campo de filtragem e comparar também se eles são iguais. Se o código não está removendo a classe "invisivel", então a condição nome == value não está sendo cumprida por algum motivo!
Peço que você tente então filtrar a paciente Tatiana! (considerando que ela é a última) Após digitar o nome dela no campo, essas deveriam ser as últimas linhas do seu console:
Se não aparecer isso, você poderia mandar um print do seu console?
Fico no aguardo!
Olá, Antonio
aqui vai a imagem do console!!
solução!
Olá, Kayke!
Como é possível perceber, o console.log(nome) está imprimindo " Tatiana", com um espaço vazio antes do nome! (quando deveria ser apenas "Tatiana"). Isso é o que está vindo HTML, então seu HTML deve estar com esse espaço para todos os nomes:
<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>O javascript consegue perceber qualquer diferença nos caracteres. Ou seja, o conteúdo das td .info-nome deve ser exatamente igual ao que você digitar no campo de filtro. Tirar esses espaços para os nomes dos pacientes no HTML deve bastar!
Espero ter te ajudado! Bons estudos! :)
olá Antonio, fico agradecido pela sua ajuda, problema resolvido !