Como pegar o valor de um campo de texto com JavaScript

Neste artigo você vai aprender a como pegar o valor de um campo de texto com JavaScript puro, acessando o input pelo DOM

Fala programador(a), beleza? Bora aprender mais sobre inputs, como resgatar valores e também JavaScript!

Para resgatar o valor de um campo de texto, vamos precisar selecionar este elemento

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Então se o mesmo possuir uma classe ou id vai facilitar bastante o nosso trabalho

Após a seleção do mesmo, basta acessar a propriedade value

Esta propriedade possui o valor do campo em formato de texto, veja um exemplo prático:

<input type="text" name="nome" id="nome" value="Matheus">

Este é o nosso HTML de referência, note que ele possui um id, facilitando a forma de seleção

E também o input já está com um dado preenchido, por meio do atributo value

Mas isso não é necessário, você pode digitar o valor manualmente ou alterá-lo, o exemplo irá funcionar normalmente

Agora veja o JavaScript necessário:

const input = document.querySelector("#nome");

const texto = input.value;

console.log(texto); // Matheus

Aqui criamos uma variável para colocar o input e selecioná-lo

Depois é só acessar value, e teremos o texto do input, que tem o valor de Matheus

Pronto, acessamos o conteúdo do elemento via JavaScript!

Conclusão

Neste artigo você aprendeu a como pegar o valor de um campo de texto com JavaScript

Utilizamos um método de seleção de input, o querySelector, para depois poder trabalhar com o seu conteúdo/texto

Por fim foi necessário acessar a propriedade value do input selecionado, e então temos o conteúdo do mesmo!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!