Entrar Ainda não tem acesso?
5
respostas

document.querySelector não funciona

por Yago Santos
| 2.2k xp | 5 posts

Boa noite pessoal, estou tendo problemas com o document.querySelector, simplesmente não funciona, retorna Null mesmo tendo valor nos inputs.

var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

console.log(campos);

alert(document.querySelector('#quantidade'));

No console do chrome e do IE, o array também fica null, null, null. Esse alert tbm retorna Null.

<form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" />
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0"  />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

Pelo que entendi da aula, o querySelector retorna o valor dentro do input, correto? Também tentei colocar um javascript interno no HTML, mesmo assim não funcionou. Agradeço desde já! Abs.

5 respostas
por Leandro Souza
| 458.9k xp | 201 posts
Desenvolvedor Web

Para inputs, textarea e outros, é necessário usar o atributo value para capturar o valor dos campos.

document.querySelector('#data').value

Isso resolverá.

por Yago Santos
| 2.2k xp | 5 posts

Boa noite Leandro, obrigado pela resposta, mas infelizmente não funcionou. O array continua NULL em tudo.

por Leandro Souza
| 458.9k xp | 201 posts
Desenvolvedor Web

Fala Yago, já conseguiu achar o erro? Veja, eu apenas mandei imprimir no console o valor dos inputs e funciona normalmente. Mas, seu script deve ter muito mais coisas, estou certo? Se assim for, coloca teu código mais completo aqui para podermos te ajudar melhor.

console.log(document.querySelector('#data').value);    
console.log(document.querySelector('#quantidade').value);
console.log(document.querySelector('#valor').value);
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Bom dia Yago,

No link abaixo tem um teste com o querySelector, conforme o Leandro disse, basta colocar o .value, se você preencher os campos e clicar em salvar ele irá informar o array.

:: LINK ::

por Yago Santos
| 2.2k xp | 5 posts

Bom dia amigos, Obrigado pela ajuda! O problema ja foi solucionado aqui no forum, o primeiro codigo que eu postei esta certo, o problema é que eu estava colocando o javascript antes do HTML, portanto, ainda não havia elementos para jogar no array. Abs.