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

Só retorna null quando dou um console.log

Estou desenvolvendo uma página que terá um filtro para uma lista, mas quando vou pegar os valores das td para fazer o filtro, retorna null, ja tentei usar .textContent mas tambem retorna null ou undefined, vou deixar os códigos aqui

var pegSubmit = document.querySelector("#filtrar");

pegSubmit.addEventListener('click', (event)=>{
    event.preventDefault();
    //pegar os inputs e os valores deles
    var pegOficio = document.querySelector("#oficio-filtro").value;
    var pegData = document.querySelector("#data-filtro").value;
    var pegNome = document.querySelector("#nome-filtro").value;

    //pegar a tabela e percorrer ela
    var candidato = document.querySelectorAll(".candidato");
    for(var i = 0 ; i < candidato.length; i++){
        var Candidatos = candidato[i];

        //pegando as td para filtrar
        var pegTdNome = Candidatos.querySelector(".nomeCd");
        var pegTdOficio = Candidatos.querySelector(".oficioCd");
        var pegTdData = Candidatos.querySelector(".dataCd");
        console.log(pegTdNome);
    }
});
3 respostas
<body>
    <div class="sidebar">
        <div class="conta">
            <img src="img/user.png" width="50px">
            <div class="conta-info">
                <h3>Bernardo Afonso</h3>
                <p>Avaliador</p>
            </div>
        </div>
        <div class="divForm">
            <h1>Filtrar</h1>
            <form id="form-filtro">
                Oficio: <select id="oficio-filtro" class="inputs">
                    <option value="empyt">Escolha o oficio</option>
                    <option value="solda">Técnico em solda</option>
                    <option value="refrigeracao">Técnico em refrigeraão</option>
                </select>
                Data: <input type="date" id="data-filtro" class="inputs">
                Nome: <input type="text" id="nome-filtro" placeholder="Nome do candidato" class="inputs">
                Ordenar por: <select class="inputs">
                    <option value="empty">Escolha a ordem</option>
                    <option value="">Recentes</option>
                    <option value="">Antigas</option>
                </select>
                <input type="submit" value="Filtrar" id="filtrar">
            </form>
        </div>
        <h2 class="rmvTit">Remover filtros</h2>
        <button id="rmvFiltros"> <img src="img/bin.png" width="50px"> </button>
    </div>
    <div class="divTabela">
        <h1 class="divTabela-titulo">Tabela Candidatos</h1>
        <table id="tabelaCd">
            <tr>
                <th>Nome</th>
                <th>Oficio</th>
                <th>Data</th>
                <th>Opções</th>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Bernardo Afonso Nascimento Silva</td>
                <td class="oficioCd">Téc.Refrigeracão</td>
                <td class="dataCd">05/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
            <tr class="candidato"></tr>
                <td class="nomeCd">Arthur Oliveira Santos</td>
                <td class="oficioCd">Téc.Soldagem</td>
                <td class="dataCd">06/02/22</td>
                <td> <button class="btnAvaliar">Avaliar</button> </td>
            </tr>
        </table>
        <div class="passadorPag"> 
            <button class="btnPassar">Voltar Pág</button>
            <button class="btnPassar">Próxima Pág</button>
        </div>
    </div>
    <script src="js/avaliador.js" defer></script>
</body>
</html>

Tirei o head por ter limite de caracteres na publicaacao

solução!

Fala Bernardo, tudo bem? Espero que sim!

No seu html, nas tr possui fechamento extra:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Assim o conteúdo fica vazio, então você deve remove-las para que se feche corretamente no outro fechamento que envolve o conteúdo.

Espero ter ajudado, abraços e bons estudos :D

nossa, me salvou cara obrigado!!!