Como pegar valor de input com JavaScript

Neste artigo você vai aprender a como pegar valor de input com JavaScript, ou seja, o texto de um campo de formulários para utilizar no seu programa

Quer criar um projeto com JavaScript? Acesse o vídeo:

Fala programador(a), beleza? Bora aprender mias sobre formulários, inputs e também JavaScript!

Para resgatar o texto que fica digitado no input vamos precisa selecionar o elemento do input

Podemos utilizar diversos métodos para isso:

• getElementById
• getElementByClassName
• querySelector

E então vamos acessar a propriedade value do elemento, que é onde fica o texto que queremos usar de outra forma

Veja um exemplo prático:

<form action="">
  <input type="text" id="name" name="name">
  <input type="submit" value="Enviar">
</form>

Este é o nosso HTML base, um formulário simples com um único campo que é o que vamos resgatar o valor

Neste caso vamos utilizar a estratégia de querySelector e imprimir seu valor

Veja a parte de JavaScript necessária:

var input = document.querySelector("#name");

var texto = input.value;

console.log(texto);

Desta forma selecionamos primeiramente o elemento na primeira linha, utilizamos o método querySelector de document

Depois criamos outra variável para o valor, mas isso não é necessário

E por fim imprimimos o texto na tela, e pronto temos o valor/texto do input =)

Conclusão

Neste artigo aprendemos a como pegar valor de input com JavaScript

Primeiramente devemos selecionar o elemento alvo que queremos resgatar o texto

Depois é só acessar a propriedade value, que é onde o texto está inserido e pronto!

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Adicionar um bloco curto mostrando na prática o getElementById, que já é citado lá em cima mas nunca aparece no código. Explicar o porquê antes: getElementById busca pelo atributo id do elemento, então serve quando teu input tem um id fixo. Mostrar o mesmo HTML base e o JS:

var input = document.getElementById("name"); var texto = input.value; console.log(texto);

E comentar que o resultado é o mesmo do querySelector, muda só a forma de selecionar o elemento (um pega por id direto, o outro por seletor CSS)

Mostrar o caso real: pegar o valor quando o usuário clica em enviar, e não só no console solto. Explicar o porquê primeiro (na prática você quase nunca quer o valor ‘na hora que a página carrega’, e sim quando o usuário faz alguma ação). Exemplo com addEventListener:

var botao = document.querySelector("#enviar");

botao.addEventListener("click", function() { var input = document.querySelector("#name"); console.log(input.value); });

E avisar o detalhe que pega muita gente: se o input estiver dentro de um form e o botão for submit, a página recarrega e some o valor do console. Pra testar tranquilo, usar um botão comum (type button) ou o event.preventDefault()

Um bloco enxuto explicando que value funciona pra text, password, number e select, mas checkbox e radio pedem outra propriedade. Deixar claro:

• input de texto, número e select: usa input.value normalmente
• checkbox e radio: o value é fixo, o que muda é input.checked (true ou false) pra saber se está marcado

Mostrar um exemplo rápido de checkbox:

var aceito = document.querySelector("#aceito"); console.log(aceito.checked);

Antecipar o erro clássico: muita gente tenta .value no checkbox e sempre volta o mesmo texto, achando que está bugado

Adicionar 3 ou 4 perguntas curtas em formato pergunta+resposta objetiva:

‘Qual a diferença entre getElementById e querySelector?’ getElementById busca só por id e é mais direto, querySelector aceita qualquer seletor CSS (id, classe, tag), então é mais flexível. O value você acessa igual nos dois.

‘Por que meu input.value volta vazio?’ Geralmente o JS roda antes do usuário digitar, ou você está lendo o value no carregamento da página em vez de dentro de um evento de clique/digitação.

‘Como pegar o valor enquanto o usuário digita?’ Usando o evento input com addEventListener, aí o value atualiza a cada tecla.

‘Preciso criar uma variável separada pro value?’ Não, dá pra usar input.value direto. A variável extra é só pra deixar o código mais legível.