Input undefined | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Laura Beatris

| 89.9k xp | 25 posts

O valor do input está retornando como undefined e por isso não está entrando na condicional pra fazer a filtragem.

Porém eu não sei o motivo do this.value não estar retornando nenhum valor.

    <h2>My pacients</h2>
                <label for="table-filter">Filter</label>
                <input type="text" name="filter" id="table-filter" placeholder=" Type the patient name">
                <table>

var filter = document.querySelector("#table-filter")

filter.addEventListener("input", function(){

    var patients = document.querySelectorAll(".paciente");
    patients.forEach(function(patient){
        var tdName = patient.querySelector(".info-nome");    
        var name = tdName.textContent;
        console.log(this.value);



    })
})

4 respostas

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

09/06/2019

Oi Laura tudo bem?

Poderia, por gentileza, colocar a pasta do seu projeto no github. Assim podemos analisar melhor o que está acontecendo.

por Laura Beatris

| 89.9k xp | 25 posts

09/06/2019

https://github.com/LauraBeatris/nutrition-javascript

por Laura Beatris

| 89.9k xp | 25 posts

09/06/2019

Também não estou entendendo o motivo da class invisible não estar sendo removida das tr que não possuem o nome igual ao do input

solução!

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

09/06/2019

Oi Laura tudo bem?

O this dentro da função forEach sempre pega o documento , então troquei o this pelo filter mesmo. E o if que estava fazendo só daria match se fosse o nome inteiro. Então ajustei para ficar igual aos filtros normais.

Dá uma olhadinha:

var filter = document.querySelector("#table-filter")

filter.addEventListener("input", function () {
    console.log(filter.value);

    var patients = document.querySelectorAll(".paciente");

    patients.forEach(function (patient) {
        var tdName = patient.querySelector(".info-nome");
        var name = tdName.textContent;

        if (name.toUpperCase().indexOf(filter.value.toUpperCase()) >= 0) {
            patient.classList.remove("invisible");
        } else {

            patient.classList.add("invisible");
        }
    });
});

Espero ter ajudado!!!