Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

this.value

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Mãos na massa: buscando pacientes

por Rodrigo Fernandes dos Santos Affonso
| 63.3k xp | 15 posts

Olá a todos,

No curso o professor usou a função for para varrer todos os pacientes conforme o código abaixo:

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

campoFiltro.addEventListener("input", function() {
    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;
            var expressao = new RegExp(this.value, "i");

            // Adição aqui
            if (expressao.test(nome)) {
                paciente.classList.remove("invisivel");
            } else {
                paciente.classList.add("invisivel");
            }
        }
    } else {
        for (var i = 0; i < pacientes.length; i++) {
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
});

Eu tentei usar a função forEach conforme o código abaixo:

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

campoFiltro.addEventListener("input", function() {
  var pacientes = document.querySelectorAll(".paciente");

  if (this.value.length > 0) {
    pacientes.forEach(function(paciente) {
      var tdNome = paciente.querySelector(".info-nome");
      var nome = tdNome.textContent;

      var expressao = new RegExp(this.value, "i");

      if (expressao.test(nome)) {
        paciente.classList.remove("invisivel");
      }else{
        paciente.classList.add("invisivel");
      }
    });
  }else{
    pacientes.forEach(function(paciente) {
      paciente.classList.remove("invisivel");
    });
  }
})

Porém a linha 

var expressao = new RegExp(this.value, "i");

Não funciona. Para fazer funcionar eu tive que usar:

var expressao = new RegExp(campoFiltro.value, "i");

Por que eu não pude usar o this.value nesse caso?

1 resposta
solução!
por Wilson Neto
| 188.9k xp | 19 posts

Boa noite Rodrigo, no javascript tem que prestar um pouco de atenção em relação aos escopos das funções. Por exemplo, nesse bloco aqui :

pacientes.forEach(function(paciente) {
      var tdNome = paciente.querySelector(".info-nome");
      var nome = tdNome.textContent;

      var expressao = new RegExp(this.value, "i");

      if (expressao.test(nome)) {
        paciente.classList.remove("invisivel");
      }else{
        paciente.classList.add("invisivel");
      }
    });

A parte em que ele diz this.value, ele está se referindo ao this da função a qual ele está dentro, no caso é a função anônima cuja o parâmetro é paciente, vide:

...
pacientes.forEach(function(paciente) {
// omissão de código
...

para acessar o valor de cima pelo this, sugiro que faça:

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

campoFiltro.addEventListener("input", function() {
  var pacientes = document.querySelectorAll(".paciente");
  var self = this;
  if (self.value.length > 0) {
    pacientes.forEach(function(paciente) {
      var tdNome = paciente.querySelector(".info-nome");
      var nome = tdNome.textContent;

      var expressao = new RegExp(self.value, "i");

      if (expressao.test(nome)) {
        paciente.classList.remove("invisivel");
      }else{
        paciente.classList.add("invisivel");
      }
    });
  }else{
    pacientes.forEach(function(paciente) {
      paciente.classList.remove("invisivel");
    });
  }
})

Desse modo, a variavel self recebe o valor this do escopo anterior, e assim pode ser acessado como você deseja.

Você pode escolher qualquer uma das duas soluções, a sua não está errada.