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

Problema para pegar this.value usando foreach

Boa noite senhores, estou com um problema quando chega na condição if( nome != this.value) . Já testei tudo e o único erro é nessa parte. Vi já alguns posts abertos sobre isto, mas não entendi como corrigir e o motivo de não conseguir pega a referencia do valor pelo "this" usando o foreach. Agradeço se alguém puder me esclarecer o motivo de acontecer este erro e como faço para soluciona-lo.

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

campo_filtro.addEventListener("input", function(){
    console.log(this.value);
    var pacientes = document.querySelectorAll(".paciente");

    pacientes.forEach(function(paciente){

        var nometd = paciente.querySelector(".info-nome");
       var nome = nometd.textContent;

       if(nome != this.value){
           paciente.classList.add("invisivel"); 
       }else{ 
           paciente.classList.remove("invisivel"); 

       }

    });
});
3 respostas
solução!

Oi Jhonantan, o problema do this pode ser por causa da função que você usa como callback para o foreach, a palavra function cria um novo contexto, assim você perde a referência que tem do evento no input e passa a referenciar a própria função de callback.

Pra testar isso, você pode logar o this dentro do foreach.

Pra solucionar isso temos duas alternativas...

1 - você criar uma variável para referenciar o this fora do foreach e usar essa variável dentro dele.

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

campo_filtro.addEventListener("input", function(){
    console.log(this.value);
   var input = this;
    var pacientes = document.querySelectorAll(".paciente");

    pacientes.forEach(function(paciente){

        var nometd = paciente.querySelector(".info-nome");
       var nome = nometd.textContent;

       if(nome != input.value){
           paciente.classList.add("invisivel"); 
       }else{ 
           paciente.classList.remove("invisivel"); 

       }
    });
});

A variável input acima faz esse papel. Acho que deve resolver.

2 - Usar arrow functions no foreach, mas isso é coisa do ES6, que você vai aprender apenas nos cursos mais avançados.

Obrigado ,estava meio perdido nesta parte, mas depois de algum tempo, fui buscar na documentação do javascript e conseguir resolver. Mas obrigado mesmo assim, sua explicação me ajudou a entender mais sobre o que estava dando errado.

Opa, mas se você tiver feito de uma forma diferente, compartilha ela aqui!