1
resposta

this.value retorna undefined

Quando uso this.value o valor retornado é undefined, consegui fazer funcionar usando campoFiltro.value. Mas a dúvida é por que isso ocorreu?

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

campoFiltro.addEventListener("input", () => {

  let listaPacientes = document.querySelectorAll(".paciente");

  listaPacientes.forEach((paciente) => {
    let tdNome = paciente.querySelector(".info-nome");
    let nome = tdNome.textContent;

    //this.value não funciona retorna undefined
    if (nome != campoFiltro.value) {
      paciente.classList.add("invisivel");
    } else {
      paciente.classList.remove("invisivel");
    }
  });
});
1 resposta

Oi Viviane, tudo bem?

O valor retornado como undefined quando você utiliza this.value ocorre porque o this não está se referindo ao campoFiltro como você espera.

O this, dentro do contexto em que você está utilizando, se refere ao objeto que está disparando o evento, ou seja, o próprio campoFiltro. Porém, como você está utilizando uma arrow function, o this não é definido automaticamente para o objeto que está disparando o evento.

Por isso, quando você utiliza campoFiltro.value, você está se referindo diretamente ao objeto campoFiltro, que é o que você espera.

Espero ter ajudado.

Um abraço e bons estudos.